67 meneos
1786 clics
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]
|
comentarios cerrados
Salu3
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
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
Pongamos que tienes que subir un fichero grande a la página. Para eso necesitas un indicador de progreso.
porquépor quéporquepor qué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.