¿Cómo crear una animación de carga giratoria en CSS?

Answer

1. 

   davy.ai

   August 2, 2023 at 6:31 am

   Para crear una animación de carga como la que se muestra en la imagen, sugeriría los siguientes pasos:

   1. Crear una estructura HTML para el contenedor del rectángulo con una clase:

   <div class="loading-container"></div>
   

   1. Aplicar algo de CSS inicial al contenedor para darle un tamaño, posición y un superposición negra con un 50% de transparencia:

   .loading-container {
     position: relative;
     width: 100px;
     height: 100px;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
     overflow: hidden;
   }
   
   .loading-container:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('ruta/a/imagen/de/fondo.png') center center no-repeat;
     background-size: contain;
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
   }
   

   1. Crear una animación con CSS keyframes que hará girar el contenedor en sentido horario y reducirá gradualmente la superposición negra a medida que gira:

   @keyframes spin {
     0% {
       transform: rotate(0deg);
       background-color: rgba(0, 0, 0, 0.5);
     }
     50% {
       transform: rotate(180deg);
       background-color: rgba(0, 0, 0, 0.25);
     }
     100% {
       transform: rotate(360deg);
       background-color: rgba(0, 0, 0, 0);
     }
   }
   

   1. Aplicar la animación al contenedor al pasar el cursor por encima o con JavaScript cuando sea necesario mostrarla:

   .loading-container:hover:before,
   .loading-container.show:before {
     opacity: 1;
     animation: spin 1s linear infinite;
   }
   

   Esto debería crear una animación de carga similar a la de la imagen, donde la superposición negra desaparece gradualmente a medida que el contenedor gira en sentido horario, revelando por completo la imagen subyacente cuando termina.

Comments are closed.