Barra de progreso

Comunicación con usuarios

Barra de progreso

Barra horizontal que indica el estado de finalización actual de un proceso de larga duración, generalmente actualizado continuamente a medida que avanza el proceso, en lugar de en pequeños pasos.

Vista Previa

Figma

Usos

Cuándo usar

Para una operación larga o un proceso que puede tomar una cantidad de tiempo considerable o desconocida.

Cuando el proceso se puede describir con información cuantitativa.

Para mostrar visualmente la progresión de una operación del sistema, como descargar, cargar, cargar datos, enviar un formulario o guardar actualizaciones.

Para comunicar que se solicitan, transfieren o procesan datos.

Cuándo no usar

Cuando el progreso se ve determinado por acciones del usuario, en vez de acciones del sistema.

Si el proceso tarda menos de 5 segundos.

Comportamiento

Estados

Visualización del componente barra de progreso en estado por defecto

Default

Error

Visualización del componente barra de progreso en estado satisfactorio

Success

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El componente progress bar tiene role="progressbar".

Tiene la propiedad aria-valuenow fijada en un valor decimal entre aria-valuemin y aria-valuemax que representa el valor actual del contador. Las tecnologías de asistencia presentaran aria-valuenow como un porcentaje.

Tiene la propiedad aria-valuemax ajustada a un valor decimal mayor que aria-valuemin.

Como el progress bar tiene una etiqueta visible, se hace referencia a ella mediante aria-labelledby en el elemento con rol="progressbar".

Tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.