¿Sabes cómo animar un loader en CSS? Las animaciones en CSS son una forma de darle movimiento a nuestra página web y crear una experiencia de usuario expandida. Pero un elemento animado no solo le da un diseño moderno a nuestra página web, también nos permite comunicar mensajes de una manera más atractiva. Este es el caso de los elementos que nos comunican que un recurso está cargando, pues con un solo icono en movimiento sabemos lo que está sucediendo. Por ello, en este post te enseñaremos cómo animar un loader en CSS para que lo puedas insertar en tu página web.
¿Qué es un loader?
Un elemento loader es un recurso que nos permite transmitir la idea de que un elemento o sección de nuestra página web está cargando. A diferencia de una barra de progreso, un loader es un elemento con una animación infinita, pues más allá de representar un camino con un inicio y un final, representa un estado.
Aunque hay muchos tipos de loader, con distintas formas y propiedades, en este post crearemos un loader con un aspecto similar a la barra de progreso que hemos creado en nuestro post sobre cómo animar una barra de progreso en CSS. Entonces, si quieres recrear este loader exactamente, te recomendamos primero crear el elemento descrito allí.
¿Cómo animar un loader en CSS?
Para animar un loader en CSS, debemos hacer el mismo proceso que con cualquier animación. En este caso, queremos que una barra recorra una y otra vez la barra de progreso. Para ello, debemos alterar la propiedad tranform:translate en los fotogramas clave. Modificar esta propiedad nos permitirá alterar la posición de la barra interna. Entonces, podemos hacer que esta empiece por fuera de su contenedor, cruce el contenedor y termine fuera, en el lado derecho (desplazándola el ancho de su contenedor).
A continuación, te describimos las líneas de código necesarias para crear el efecto para animar un loader en CSS:
@keyframes infinite-loader {
0%
transform: translate (-100%)
100%
transform: translate (300px)
Una vez definidos los keyframes de nuestra animación, es el momento de insertar la animación en nuestro elemento. Para ello, basta con insertar la propiedad animation en nuestra barra con el nombre que le hemos dado (infinite-loader).
Un paso muy importante para hacer que el loader se comporte como tal, es hacer que la propiedad animation-iteration-count tenga la palabra clave infinite. Esto determinará que la animación se repita de manera infinita, creando el efecto que queremos. También te recomendamos jugar con la propiedad animation-duration y hacer que tu animación dure el tiempo exacto para que el paso del loader no se vea muy rápido ni muy lento.
¿Qué sigue?
Ahora que sabes cómo animar un loader en CSS, te invitamos a seguir aprendiendo sobre las posibilidades que CSS tiene que ofrecerte a través de nuestra formación intensiva sobre desarrollo web. En el Desarrollo Web Full Stack Bootcamp, aprenderás todo lo necesario para ser un experto en este tema. Además, durante el curso, crearás y diseñarás tu propia página web para poder demostrar todos los conocimientos aprendidos. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡No te pierdas esta oportunidad y matricúlate!
