Gracias a las animaciones de carga, los usuarios saben que un sitio web está esperando para recibir respuesta del servidor. De no existir este tipo de animaciones y demorarse la visualización de la página, el visitante podría pensar que el sitio no responde o que está bloqueado cuando la realidad es que tarda en responder. Las animaciones de carga son una interfaz básica en muchos sitios actuales, principalmente cuando se realiza la carga de contenido de manera asíncrona, lo que conocemos comúnmente por Ajax.
Existen muchos medios para incorporar mensajes de carga, desde un simple texto hasta una imagen, pero la mejor manera de conseguirlos es por medio de animaciones CSS.
¿Por qué usar animaciones CSS?
Lejos está el tiempo en el que las animaciones de carga debían ser incorporados mediante gifs animados. Actualmente las animaciones CSS están soportadas por todos los navegadores, por lo que son un medio también ideal, que además tiene diversas ventajas:
- Pesan poco.
- Son personalizables, en tamaños, velocidad o color.
- Podemos aplicarla en muchos casos usando una simple clase CSS.
Cómo realizar animaciones de carga CSS
Podemos aprender a crear animaciones CSS en este post publicado en el blog de Arsys: Por qué implementar animaciones CSS. No obstante, crear una animación atractiva para indicar la carga de contenido no es una tarea demasiado fácil, ya que es necesario un conocimiento elevado de CSS y ser bastante detallista. Si no andamos con mucho tiempo, en la web podemos encontrar recursos interesantes para conseguir animaciones CSS para la carga, a veces llamados loaders o spinners. Una de las alternativas más populares la tenemos en loading.io.
Cómo implementar una animación de carga
Como hemos dicho, las animaciones CSS simplemente requieren añadir un poco de código a nuestras hojas de estilo y luego aplicar una sencilla clase al elemento de la página donde queremos que aparezca la animación. En el siguiente código HTML podemos ver cómo se implementa un CSS loader de los ofrecidos por «loading».
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cómo implementar un css loader</title> <style> .lds-hourglass { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-hourglass:after { content: " "; display: block; border-radius: 50%; width: 0; height: 0; margin: 8px; box-sizing: border-box; border: 32px solid #666; border-color: #666 transparent #666 transparent; animation: lds-hourglass 1.2s infinite; } @keyframes lds-hourglass { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 50% { transform: rotate(900deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 100% { transform: rotate(1800deg); } } </style> </head> <body> <h1>Cómo implementar un css loader</h1> <div class="lds-hourglass"></div> </body> </html>
Como puedes ver, en el CSS se encuentra la definición de la animación y en el HTML simplemente tenemos un elemento <div> al que le hemos colocado la clase necesaria para crear la animación en ese contenedor.
Cambiar el color del elemento animado es tan sencillo como localizar el RGB que lo define en el CSS. Atendiendo al código anterior, tendrás que cambiar todo lugar donde aparece #666, y sustituirlo por el valor que desees.
Animaciones de carga complejas
En el ejemplo anterior hemos seleccionado una animación sencilla deliberadamente. Sin embargo, algunas no son tan fáciles de implementar como aplicar una clase CSS a un único elemento. Esto es porque, en ocasiones para que la animación se vea correctamente necesitamos varios elementos HTML dentro del elemento al que le aplicamos la clase CSS para animarlo.
Por ejemplo, nuestro marcado quedaría así:
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div></div>
Esto nos complica la vida a la hora de implementar la animación, porque no solo se trata de aplicar una clase sobre un elemento, sino que ese elemento necesita tener una serie de tags hijos, pues cada uno forma parte de la animación. En estos casos nuestra recomendación es acudir a un Custom Element, del estándar de Web Components, pues este tipo de elementos encapsulan toda la complejidad del sistema para generar la animación. Gracias a ello, por muy complicado que sea el marcado necesario para implementar la animación, siempre estará contenido en una única etiqueta.
Componente de animación de carga
Un componente para conseguir el efecto de animación de carga lo podemos encontrar en esta página de GitHub. Para implementarlo únicamente necesitamos hacer los siguientes pasos:
1.- Instalar el componente en el proyecto
npm i @dile/dile-spinner
2.- Importar el componente desde nuestro Javascript
import '@dile/dile-spinner/dile-spinner.js';
3.- Usar la etiqueta del componente donde queramos que se vea la animación:
<dile-spinner active></dile-spinner>
Esta etiqueta es el Custom Element, del estándar de Web Components. Como es Javascript estándar lo puedes usar en cualquier proyecto donde lo necesites. Es decir, es compatible con cualquier stack de tecnologías o frameworks Javascript con el que trabajes. La implementación de custom elements es siempre similar, importando su Javascript, por lo que son bastante fáciles de usar y además son compatibles con todos los navegadores actuales.
En el componente dile-spinner, activar o desactivar la animación se consigue mediante el atributo «active». Si simplemente le quitamos el atributo «active» a la etiqueta <dile-spinner> no se verá la rueda cargando, por lo que activarla o desactivarla aquí sería tan sencillo como colocar o quitar ese atributo de la etiqueta del componente.
Dado que los web components tienen el CSS encapsulado, si necesitamos cambiar el color de elemento necesitamos definir una variable en nuestro CSS. Para este componente tenemos algunas variables CSS disponibles:
body { --dile-spinner-color: yellow; --dile-spinner-dot-size: 3px; }
Esto hará que todas las animaciones de carga en la página tengan color amarillo y el tamaño de los puntos de la animación sea de 3px. Pero por supuesto, podríamos redefinir estas variables en cualquier lugar donde queramos que la animación tenga otro color distinto, incluso en el mismo sitio web.