Cómo animar un loader de ondas en CSS

Autor: | Última modificación: 8 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Las animaciones son una gran forma de darle movimiento a una página web y diferenciar su diseño. En la cotidianidad de la web, encontramos muchas animaciones. Una de las más comunes es un elemento que nos permite comunicar que un recurso está cargando, conocido como spinner o loader. En este post, te enseñaremos cómo animar un loader de ondas en CSS para que puedas insertar movimiento en tu página web de una manera única.

¿Qué es un loader de ondas?

Un loader de ondas es un elemento animado que nos permite comunicar que un recurso está cargando. Su diseño consiste en varios círculos que van cambiando de tamaño de manera retardada, creando un efecto de onda. A diferencia de un spinner básico, un loader de ondas puede diferenciar tu diseño mucho más y darle un estilo moderno a tu página web.

A continuación, te enseñamos cómo animar un loader de ondas en CSS, construido con tres círculos de diferentes tamaños.

¿Cómo animar un loader de ondas en CSS?

Antes de animar un loader de ondas en CSS, debemos crear los elementos que animaremos: tres círculos en nuestro documento HTML. Para cada uno crearemos un elemento div con un atributo de clase. Nosotros hemos llamado a nuestros elementos circulo-1, circulo-2 y circulo-3. Recuerda que nombrar tus elementos con un atributo de clase te permite darle estilos desde CSS de una manera mucho más fácil usando su selector de clase. También puedes definir el estilo de un elemento usando la etiqueta <style> directamente desde tu documento HTML.

Primero, debes asegurarte de que los tres círculos tengan ciertas características iguales. Para esto, puedes usar los selectores múltiples de CSS para seleccionar y modificar los tres elementos en una sola línea de código. Entonces, definiremos que las propiedades de border y border-radius sean iguales. Con estas propiedades defines el ancho del borde, su color y su forma.

Para animar un loader de ondas en CSS, necesitaremos dos estados en nuestra directiva @keyframes. Llamaremos a esta animación «ondas» y se escribirá de la siguiente manera:

@keyframes ondas {

from {

width: 0;

height: 0;

top: 45px

left:45px

}

to {

width: 100px

height: 100px

top: 0

left: 0

}

Esta animación hará que nuestros círculos empiecen desde un tamaño 0 y terminen en un tamaño 100, creando un efecto de ondas. Para hacer que los círculos crezcan desde el centro de su contenedor, hacemos que su propiedad top y left tengan un valor de la mitad del ancho y alto del contenedor.

Podemos insertar esta animación a todos nuestros círculos con el nombre ondas. Sin embargo, para hacer que creen un efecto de ondas, donde los círculos están contenidos uno dentro de otro, necesitamos que tengan distintas características de retraso. Entonces, podemos darle la propiedad animation-delay al segundo y tercer círculo, puede ser uno de 3s y otro de 5s.

El último detalle que nos ayudará a animar un loader de ondas en CSS es la opacidad. Para esto, podemos agregar la propiedad opacity a nuestros fotogramas clave, empezando en 1 y terminando en 0.

¿Cuál es el siguiente paso?

Ahora que sabes cómo animar un loader de ondas en CSS, te invitamos a seguir aprendiendo sobre las distintas posibilidades que CSS tiene para ti en nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás mucho más sobre diseño y dominarás todo lo necesario para ser un experto en desarrollo web en pocos meses. ¡Apúntate ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!