Esperar a que una página cargue podría ser uno de los mayores retos al momento de pensar en la experiencia de usuario y en la tasa de conversión. A los usuarios no les gusta esperar más de 3 segundos. Si bien es esencial que la velocidad de tu sitio sea óptima, en ciertas ocasiones los usuarios tendrán que esperar y para darles a entender que los recursos de la página están siendo cargados, puedes hacer uso de animaciones simples. Estas animaciones son de uso común no sólo en la web, sino también en aplicaciones móviles y pueden mejorar la interactividad e incluso la experiencia de usuario pues tienen una función informativa. Pero, por supuesto, siempre puedes usar algo de creatividad y poner a prueba tus habilidad en CSS y JavaScript para poder hacer una animación de carga realmente llamativa. Y si estás pasando por una fase de bloqueo, aquí te listamos algunas animaciones de carga de CodePen que son realmente creativas e interesantes.
CSS Loading Animation
See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.0
Esta animación hace uso de coloridos círculos colocados en sucesión uno bajo otro. Éstos se mueven de manera sincronizada y por grupos. La animación es bastante fluida y natural, además la paleta de colores utilizado es realmente llamativa, de manera que esta animación no pasará desapercibida si se coloca en un sitio web.
Hexagonal Loading Animation
See the Pen Hexagonal Loading Animation (CSS3) by Kevin Martin (@aslan11) on CodePen.0
Como su nombre indica, es una animación donde cada elemento agregado se una para formar un hexágono. Al mismo tiempo cada uno de estos elementos es un hexágono. Estas figuras aparecen hasta forma el hexágono mayor y luego desaparecen. Las transiciones son bastante sutiles y se ha elegido un color claro que no genera estrés en la vista de los usuarios.
Loading animation CSS
See the Pen Loading Animation CSS by tatsuya_42EG4M1 (@42EG4M1) on CodePen.0
Esta animación hace uso de tipografía y un efecto de desenfoque, es como si un filtro de desenfoque se estuviera aplicando por partes al texto, de manera que en ciertas partes de la animación algunas letras del texto aún son legibles. El espaciado entre las letras que conforman la palabra es el adecuado para que aún se note como una unidad.
Authentic Weather Loader
See the Pen Authentic Weather Loader by Tim Holman (@tholman) on CodePen.0
Esta creativa animación nos muestra iconos sencillos de una nube superponiéndose al sol, dando a entender que el clima es nublado. Adicionalmente, de la nube caen gotas de lluvia, el sol se mantiene en constante movimiento lo que le da a esta animación bastante interactividad. El uso de iconos simples la hace incluso más actual.
Yet more CSS Loading Animations
See the Pen Yet more CSS loading animations by Adam Mustill (@amustill) on CodePen.0
Este contiene 3 animaciones sencillas en base a figuras geométricas. Debido a la misma simpleza con la que se han realizado se ven bastante modernas y pueden ser perfectas para sitios web que se enfocan en la simpleza y los espacios en blanco.
Compose Loading Animation
See the Pen Compose loading animation by Brandon Mathis (@imathis) on CodePen.0
Esta animación tiene un estilo sencillo, se han colocado figuras que poseen cierta profundidad debido al ángulo de perspectiva en el que han sido dibujado. La imagen completa está compuesta por 4 bloques que se van moviendo mientras la página carga. Es un efecto bastante único y podría ser perfecto para sitios web que emplean este tipo de figuras como parte de su línea gráfica.
Loading Animation Game
See the Pen Loading Animation/Game by Andrew R McHugh (@armthethinker) on CodePen.0
Esta animación es bastante genial pues propone un juego: deshacerte de todos los iconos mientras la página termina de cargarse. Parece una tarea sencilla, pero los iconos vuelven a aparecer en un par de segundos después de que has pinchado sobre ellos.
CSS3 Loading Animation Experiment
See the Pen CSS3 loading animation experiment by Catalin Rosu (@catalinred) on CodePen.0
Esta animación hace uso de un triángulo que gira rápidamente sobre su propio eje. Pero ese no es la única acción que podemos apreciar: este triángulo equilátero está dividido en 4 partes iguales y 3 de ellas cambian de color antes de que el triángulo de mayor tamaño rote. Podría ser una opción adicional a la ya conocida animación que hace uso de un círculo.
Loading Animation
See the Pen Loading Animation by Yash Bhardwaj (@yashbhardwaj) on CodePen.0
Esta animación hace uso de 9 cuadrados de igual tamaño y los organiza de manera simétrica (3 por cada lado). Se emplean dos colores para cada cuadrado se diferencia de otro y lo realmente interesante es que todos los cuadrados giran sincronizadamente.
SVG Loading Animation
See the Pen svg loading animation by rdfriedl (@rdfriedl) on CodePen.0
Esta animación hace uso de figuras sencillas: en el centro vemos un rombo que se mueve ligeramente. A sus lados, está rodeado por dos corchetes que se alejan y se acercan mientras el rombo rota.
Another Loading Animation
See the Pen Another Loading Animation by Robert Douglas (@redouglas) on CodePen.0
Esta animación hace uso de líneas simple para transformar figuras en tiempo real, de manera que pasa de ser un simple conjunto de líneas ordenadas a convertirse en un círculo. La animación luce bastante fluida.
Jellibeans
See the Pen Jellibeans by Tiffany Rayside (@tmrDevelops) on CodePen.0
Jellibeans hace uso de círculos de diferentes colores que rebotan en su mismo sitio. Cada círculo va creciendo de tamaño, se emplea una buena paleta de colores e incluso se añade un ligero efecto 3D a estos simples círculos al colocar sombras bajo cada uno de ellos.
Fitbit Loading Animation
See the Pen Fitbit loading animation by Aranja (@aranja) on CodePen.0
Esta animación también hace uso de círculos que aparecen y desaparecen. Se han colocado los círculos de modo que se forma la figura de un rombo al ver todos los círculos.
Pancake Loader
See the Pen CSS Pancake Loader by Dario Corsi (@dariocorsi) on CodePen.0
Esta es una animación de carga muy creativa: nos presenta como un plato se va llenando con panqueques. Las ilustraciones son sencillas y el color de fondo realmente ayuda a que destaque la ilustración. Es una animación de carga que podría servir sólo en un par de sitios, pero no se puede negar que es súper creativo.
Lego Preloader
See the Pen Lego Preloader by Paul (@Maseone) on CodePen.0
Esta animación también es bastante creativa: hace uso de piezas de lego que se van uniendo a la anterior. Cada pieza posee un color distinto y una vez que unen 4 piezas, una de ellas salta, de modo que siempre quedan 3 piezas y se convierte en una animación cíclica.
En conclusión…
Hay diversos caminos que puedes tomar al realizar animaciones de carga. Hemos visto ejemplos que hace uso de figuras geométricas y transiciones sencillas para captar la atención de los visitantes. Asimismo, también hay animaciones de carga que hacen uso de ilustraciones y serían perfectas para ciertos tipos de sitio web que tengan la misma temática. Sin importar qué animación de carga decidas incluir en tu sitio, debes tener en cuenta que esta característica interactiva también forma parte de la marca, de modo que si la adaptas a la misma, estarías un paso por delante de tus competidores.
Esperamos que estos ejemplos te hayan inspirado para realizar tus propias animaciones de carga, ya sea como parte de un experimento o para un proyecto más amplio.
