Progress bar

Es un elemento que nos sirve para entender el porcentaje en el se encuentra una tarea o un requisito.

¿Cuándo usarlo?

Procesos automáticos con duración variable.
Cuando es necesario indicarle al usuario que un proceso está en curso.
Para mostrar avance continuo.

Anatomía completa del progress bar

Es el conjunto de elementos que pueden conformar un progress bar. No todos son obligatorios en cada caso:

Label: título del progreso
Optional indicator
Required indicator
Tooltip
Fill (barra): avance del proceso.
Helper text (opcional): ofrece orientación adicional o aclaraciones.

Estados del progress bar

Los estados del input representan las diferentes situaciones en las que puede estar un campo durante la interacción.

Default
Completado

Casos de uso común

Buen uso del progress bar

Si incluye label, usa mensajes claros y orientados a la acción.
Si muestra porcentaje, asegúrate de que sea consistente (0 a 100).

Contenidos