Barras de progreso e indicadores de carga en CSS

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]

[#1 Virusaco]

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

[#14 EmuAGR]

#1 Uf, ha sido mi primera sensación incluso habiendo entrado después de leer tu comentario...

[#3 abnog]

Vaya mierda de página, no carga nada.

[#4 mecha]

#3 No, pero entretiene un rato

[#15 EmuAGR]

#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.

[#17 daphoene]

#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.

[#18 EmuAGR]

#17 La gente si no pones 30 toasts se pierden.

[#21 llorencs]

#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.

[#9 Porkopek_]

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

[#16 EmuAGR]

#9 Si limitamos a los tres más conocidos, no podremos dar a conocer otros tres más.

[#6 chochis]

Antiestrés de toda la vida...

[#12 TALIVAN_HORTOGRAFICO]

#10 porque por qué

[#5 pkreuzt]

Si necesitas un indicador de progreso de la carga de tu web, lo estás haciendo rematadamente mal

[#7 topecb]

#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

[#11 TALIVAN_HORTOGRAFICO]

#7 porqué por qué

[#8 Porkopek_]

#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

[#10 llorencs]

#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.

[#13 jonolulu]

#5 Subida de ficheros, reproducción de videos, descarga de datos...

[#20 PacoJones]

#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.

[#19 Desactivado]

con lo fácil que es poner un gif

[#2 Desactivado]

Yo prefiero las cebollas lloronas de el nuevo MNM. Son tan cool.