Tipo 01
Lineal determinado
Barra que se llena según el avance real.
Componentes Indicadores de progreso
Indicadores de progreso
Los indicadores de progreso muestran que algo está cargando o en proceso, y cuánto falta si se sabe.
Uso
Úsalos siempre que una acción tarde más de un segundo: cargar una página, subir un archivo, procesar un pago.
- Cargas de más de 1 segundo
- Procesos con pasos medibles (subir archivos)
- Procesos instantáneos: el parpadeo confunde
- Varios indicadores en la misma vista
Principios
1
Honesto
Si se sabe el avance, se muestra; si no, se indica que está trabajando.
2
Visible
Cerca de lo que se está cargando.
3
Tranquilo
Animación continua y suave, sin saltos.
Tipos
Tipo 02
Lineal indeterminado
Barra en movimiento cuando no se sabe cuánto falta.
Tipo 03
Circular determinado
Círculo que se completa según el avance.
Tipo 04
Circular indeterminado
Círculo que gira sin fin mientras carga.
Anatomía
12
- Pista (track)
- Indicador (la parte que avanza)
Comportamiento
taller-3.pdf
Listo para subir
- El indicador aparece solo si la espera supera 1 segundo aprox.
- Al terminar, desaparece y se muestra el resultado o un mensaje.
- Los indeterminados pueden pasar a determinados cuando se conoce el total.
Medidas
| Medida | Valor de referencia |
|---|---|
| Lineal: alto | 4 dp |
| Circular: tamaño | 48 dp (también 24 y 36) |
| Circular: grosor | 4 dp |
| Ubicación del lineal | pegado al borde de la barra o tarjeta |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Rol
role="progressbar" con aria-valuenow, o
Indeterminado
Sin aria-valuenow; aria-busy="true" en la zona que carga.
Anuncia el final
Un mensaje "Archivo subido" con role="status".