El tiempo de carga de tu página depende de varios factores. En ocasiones, esos factores están fuera de tu alcance pues depende totalmente de la velocidad de conexión de los usuarios. Pero, si sabes que vas a hacer esperar a tus usuarios, debes hallar alguna forma de distraer su atención y una forma de hacerlo es empleando barras de progreso.
En este artículo te presentamos 6 creativas animaciones de barras de progreso para que aumentes la interactividad de tu sitio web:
HelixBar
Se ha empleado un caracol como indicador de velocidad, lo cual es bastante irónico pues sabemos que los caracoles son bastante lentos. Sin embargo, este caracol, aunque empieza avanzando lentamente, de un momento a otro potencia su velocidad y en cuestión de instantes avanza hasta el final. Una animación divertida y sin duda alguna, muy creativa.
Detailed Vertical Progress Bar
Se ha realizado una barra vertical, a modo de termómetro. Además, se le han añadido anotaciones conforme la barra va avanzando.
Pieces
Este plugin te permite elegir entre más de 300 animaciones de carga, las cuales puedes modificar mediante deslizadores.
Gears
Como su nombre indica, se emplean engranajes para indicar el tiempo de carga. La animación es fluida y se aprecia muy bien.
Every Last Drop
Emplea una barra circular para indicar el progreso de carga. Se ha realizado un juego tipográfico, reemplazando la “O” por una gota e incluyen la barra de progreso dentro de este elemento.
CSS3 Loader Animation
Esta simple animación se ha realizado en base a círculos. Como si de barajas se tratasen, los círculos se ordenan teniendo como referencia el círculo del centro.
