Una de las mejores formas de crear animaciones de carga para tus proyectos web que no implique la carga de recursos desde su servidor web, CDN externos o complementos de Javascript de terceros, es crearlo dentro de tu aplicación web utilizando las mismas tecnologías web que usa para renderizarlos.
Esto asegura que tus animaciones aparezcan tan pronto como las necesites, asegurándote de que la experiencia del usuario no se vea afectada según la velocidad de la conexión.
En este tutorial vamos a realizar una animación de carga sencilla para proyectos web utilizando HTML y CSS.
El resultado final que buscamos es la siguiente animación.
Crea la siguiente plantilla HTML:
<div class="svg-loader">
<svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
<circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
<circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
</svg>
</div>Como es evidente en la imagen de arriba, la plantilla de animación consta de dos círculos uno encima del otro, siendo el primer círculo más grueso que el segundo y ambos tienen la misma circunferencia dando la ilusión de que un círculo está dentro del otro.
Los atributos cx y cy dentro de los círculos son las coordenadas del eje xy del eje y, respectivamente, de los dos círculos. Se aseguran de que los dos círculos estén centrados en la misma coordenada.
Agrega el siguiente CSS:
.svg-loader{
display:flex;
position: relative;
align-content: space-around;
justify-content: center;
}
.loader-svg{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
fill: none;
stroke-width: 5px;
stroke-linecap: round;
stroke: rgb(64, 0, 148);
}
.loader-svg.bg{
stroke-width: 8px;
stroke: rgb(207, 205, 245);
}El CSS anterior asegura que el componente de carga esté centrado dentro de su contenedor y también asegura que haya diferentes anchos de trazo y colores para los dos círculos.
Luego, animamos el segundo círculo, que estará encima del primer círculo con CSS para completar nuestra animación de carga:
.animate{
stroke-dasharray: 242.6;
animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
}
@keyframes fill-animation{
0%{
stroke-dasharray: 40 242.6;
stroke-dashoffset: 0;
}
50%{
stroke-dasharray: 141.3;
stroke-dashoffset: 141.3;
}
100%{
stroke-dasharray: 40 242.6;
stroke-dashoffset: 282.6;
}
}Esto es lo que sucede en el CSS anterior:
Cuando dibujamos nuestro círculo, es simplemente un trazo de un solo guión que pinta el contorno de nuestra forma desde el principio hasta el final del círculo, el atributo stroke-dasharray nos da la capacidad de dividirlo en un patrón de guiones y espacios. Podemos aprovechar esta función para obtener el resultado final de la animación que queremos.
Para tener un efecto de animación suave como el anterior, necesitamos conocer la circunferencia del círculo, donde circunferencia = 2 x pi x radio. Luego usamos el atributo stroke-dasharray para dibujar un máximo de un guión y un espacio alternando sus tamaños en diferentes estados de la animación mientras mantenemos la longitud de la circunferencia cuando se agregan los dos.
Con un radio de círculo de 45 obtenemos la circunferencia de 282.6, por lo que cuando establecemos el valor de stroke-dasharray en 141.3, significa que el guión y el espacio tienen el mismo valor que se suman para dar una suma de 282.6.
El atributo stroke-dashoffset es un atributo de presentación que define un desplazamiento en la representación de la matriz de guiones asociada, este desplazamiento da el efecto de rotación a la animación de carga; de lo contrario, la animación aparecerá rota. Esto es todo lo que está sucediendo en la animación de relleno.
Terminamos aplicando esta animación al segundo círculo con la clase .animation asegurándonos de que esta animación continúe infinitamente.
Esto es solo una base para el tipo de animaciones que uno puede hacer con SVG y CSS, pon a prueba tu creatividad creando animaciones de carga rápidas y con píxeles perfectos para tus proyectos web.
Puedes leer el artículo original en inglés en: https://dev.to/xinnks/create-loading-animations-with-svg-and-css-1d0p