En la página CSS loaders and Spinners hay decenas y decenas de barras de progreso e indicadores de carga creados con unas pocas líneas de código CSS y una sencilla instrucción HTML. Basta añadirlo a la hoja de estilos de la página y utilizar un código span class="loader" para mostrarlos en acción. Las animaciones incluyen desde ruedas, círculos y relojes a animaciones más complicadas con otras figuras geométricas, barras de progreso, deslizadores, textos que se van rellenando, flechas baterías y otras muchas metáforas. [vía microsiervos]
Comentarios
Entro para ver la colección de loaders y una vez en la página me quedo un rato esperando a que cargue el contenido...
Salu3
#1 Uf, ha sido mi primera sensación incluso habiendo entrado después de leer tu comentario...
Vaya mierda de página, no carga nada.
#3 No, pero entretiene un rato
#11 Hay mucha gente que si no pones trabas a su productividad se piensa que la web no funciona.
Web perfectamente fluida: Le doy al botón de confirmar, pero no veo cambios, le voy a dar otra vez a ver si... *Abre ticket de soporte* Oye, hago click en este botón y no pasa nada. Backend: He guardado ya 20 veces el dato.
Web con cargas, animaciones innecesarias, sensación de pesadez: Ostras, menuda pasada de web, mira cuántas cosas procesa, atentos a la barra de carga que está haciendo algo.
#15 Una web perfectamente fluida también puede dar feedback, y así no llamas a soporte ni guardas 20 veces el dato. Que no son cosas incompatibles. Igual es muy fluida pero le falla el UX.
#17 La gente si no pones 30 toasts se pierden.
#18 El dato se debe ver, o se debe claro que se ha guardado. Eso ocurre en la web o en la aplicación de escritorio.
Recomiendo que utilicéis los más sencillos, y, a ser posible, que sean conocidos, porque si no el usuario los puede llegar a odiar.
Están bien para una exhibición en codepen, pero para utilizar en páginas serias, limitaos a 2 o 3 de los más conocidos
#9 Si limitamos a los tres más conocidos, no podremos dar a conocer otros tres más.
Antiestrés de toda la vida...
#10
porquepor quéSi necesitas un indicador de progreso de la carga de tu web, lo estás haciendo rematadamente mal
#5 No tiene porqué, hay procesos que se lanzan que no pueden ser inmediatos... o que quieras parecer que no lo son.
Por ejemplo al enviar un formulario de contacto (o un código de confirmación por sms) le pones 1 segundo la animación y le das apariencia de que hace algo más
#7
porquépor qué#5 No creas, en la web de hoy en día hay aplicaciones que tardan su tiempo en cargar. No todo es contenido estático
#5 No tiene porque. Puedes tener procesos largos de ejecución. Piensa que la página web puede ser una aplicación.
Pongamos que tienes que subir un fichero grande a la página. Para eso necesitas un indicador de progreso.
#5 Subida de ficheros, reproducción de videos, descarga de datos...
#5 Los indicadores de progreso es para informar al usuario que algo está sucediendo en la web y que todavía no ha finalizado, es simplemente para que no se impaciente, no tiene nada de malo ni es síntoma de que estás haciendo algo mal, es una buena práctica.
con lo fácil que es poner un gif
Yo prefiero las cebollas lloronas de el nuevo MNM. Son tan cool.