Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Barra de progreso
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.
Usos
Como 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.
Como 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
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-valuemin establecida en un valor decimal inferior a aria-valuemax.
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
