Codigo CSS para animaciones de carga

En internet, las personas odian esperar ya que se aburren con facilidad si un sitio es lento. Tiene otras opciones y preferirán visitar otra página a tener que esperan que una página lenta se termine de cargar.

Sin embargo, esperar en la web es inevitable. Sin importar que tan rápida sea la conexión a internet, los usuarios tendrán que esperar unos segundos para poder ver una página en su totalidad. Entonces, ¿cómo invitar a los usuarios a que esperen unos breves momentos? Con animaciones de carga.

Las animaciones de carga no sólo pueden entretener brevemente al usuario, sino que mejoran la usabilidad ya que estás informando a tus visitantes que la página está cargando.

En este artículo, te listamos codigo CSS para distintas animaciones de carga:

Spinning Loader

Este código te permite incorporar una letras grandes y rojas que indican “Loading”. En este caso, la “O” es un espiral animado que indica que se está cargando la página.

Happy Loader

Con este código tendrás en tu sitio dos planetas caricaturizados danzando de un lado al otro.

Evil Loader

Esta animación tiene un aspecto siniestro y oscuro, pero podría ser efectivo para intrigar a tus visitantes.

Yet another loading animation

Se ha colocado cada letra de la palabra “loading” en un recuadro, que se encuentran uno junto al otro. La animación es una especia de ola, donde la “l” sube primero y segundos después le sigue la “o” y así sucesivamente.

Circular Progress

Este codigo CSS te permite añadir barras que se ordenan de manera circular. En el centro hay un número que indica el porcentaje de carga. Es bastante útil pues el usuario puede calcular cuánto tiempo más debe esperar.

Spin.js

Por medio de sliders puedes personalizar cómo se verá tu animación de pantalla. Spin.js implementa en tu sitio una barra circular que se va coloreando para indicar que la página se está cargando.