Progress
El componente EProgressLinear comunica el estado de tareas de carga, sincronización y procesamiento mediante una pista lineal compacta. Usa progreso determinado cuando la aplicación conoce la cantidad completada e indeterminado cuando solo puede confirmar que el trabajo está activo.
Uso
Configura las props comunes del progreso e inspecciona el markup generado. value controla la pista llena en modo determinado, mientras indeterminate la reemplaza por movimiento continuo.
48%
Modos de progreso
Elige el modo según la información que puede reportar la tarea. El progreso determinado representa un valor medible de 0 a 100; el indeterminado comunica actividad sin sugerir una estimación de finalización que no está disponible.
Determinado
72 % de los archivos procesados
Indeterminado
Preparando datos del workspace
Color y grosor
Usa color para alinear la barra con su contexto y height para adaptarla a controles compactos o superficies de tarea destacadas. useContrastColor resuelve el token de contraste asociado con el color seleccionado.
3px · primary
6px · secondary
8px · contrast
Valores y ciclo de vida
Actualiza value desde el estado real de la tarea. El componente normaliza entradas numéricas inválidas a 0 y limita los valores finitos al rango de 0 a 100, pero la fuente de datos debe seguir proporcionando un progreso significativo.
Patrones de composición
Acompaña la barra con una etiqueta de tarea y un estado visible para que las personas sepan qué se ejecuta y qué significa completarlo. La exportación de un reporte es determinada cuando se pueden medir los elementos procesados e indeterminada mientras el servidor prepara trabajo sin totales.
Exportación del reporte trimestral
Listo para iniciar la exportación del reporte
Accesibilidad
El componente renderiza role="progressbar" con un rango de 0 a 100. El modo determinado expone aria-valuenow; el indeterminado lo omite. Proporciona un nombre accesible a la barra y marca la región relacionada como ocupada mientras el trabajo está activo.
La región contenedora informa su estado ocupado mientras la exportación está activa.
Recomendaciones de uso
Mantén el progreso honesto, contextual y legible en todos los estados de la tarea.
Haz
- Usar el modo determinado cuando el progreso provenga de trabajo medible.
- Colocar una etiqueta de tarea o estado visible cerca del progreso importante.
- Usar un color y grosor que permanezcan legibles sobre la superficie actual.
Evita
- Inventar porcentajes para operaciones que no pueden reportar finalización.
- Dejar el progreso indeterminado activo después de finalizar la tarea.
- Depender solo de la animación o el color para comunicar el estado de la tarea.
Referencia API
Consulta las props públicas verificadas de EProgressLinear. El componente no emite eventos públicos ni expone slots públicos.
Props de EProgressLinear
| Propiedad | Tipo | Por defecto |
|---|---|---|
| indeterminate | boolean | false |
Usa una animación continua cuando la operación no puede informar un porcentaje exacto de finalización. | ||
| value | number | 0 |
Define el progreso determinado. Los valores se normalizan al rango de 0 a 100. | ||
| height | string | number | 4 |
Define el grosor de la barra. Los números se normalizan a píxeles y los strings aceptan medidas CSS válidas. | ||
| color | string | undefined |
Resuelve el color del progreso mediante el sistema de color del framework. | ||
| useContrastColor | boolean | false |
Usa el token de contraste asociado con color en lugar de su valor base. | ||
Eventos y slots
EProgressLinear no emite eventos públicos ni expone slots públicos.