¿Quieres aprender cómo animar un loader de ondas en CSS? ¿Sabes qué es un loader? 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?
Para empezar, hablamos acerca de qué es un loader. 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, ya que sabes qué es un loader, 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 con ondas css:
@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 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, con conceptos como ondas css. ¡Apúntate ya!
