Progressbar
Barra de progreso
Una barra de progreso muestra cuánto de una tarea cronometrada se ha completado. Las personas pueden leerla pero no controlarla directamente.
Un ejemplo real
Mientras se carga un archivo de 2,4 GB, la barra anuncia “Subida, 68 por ciento” y se actualiza solo cuando es útil. Muestra una cantidad desconocida mientras el servidor verifica el archivo. Cancelar sigue siendo un botón separado.
Partes principales
- 01Etiqueta de tarea
- 02Rastrear y rellenar
- 03Valor actual
Úsalo cuando
Muestra un número cuando se conoce el trabajo total. Si es desconocido, etiqueta ese estado y explica lo que está sucediendo ahora.
No lo uses cuando
No hagas que la barra de progreso sea enfocada o ajustable. Usa un control deslizante cuando la persona controle el valor.
Nombre usado en código
role=progressbar with aria-valuemin/max/now and accessible name Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Barra de progreso (Progressbar). User context: Mientras se carga un archivo de 2,4 GB, la barra anuncia “Subida, 68 por ciento” y se actualiza solo cuando es útil. Muestra una cantidad desconocida mientras el servidor verifica el archivo. Cancelar sigue siendo un botón separado. Recommended pattern: Barra de progreso (Progressbar). Why it fits: Muestra un número cuando se conoce el trabajo total. Si es desconocido, etiqueta ese estado y explica lo que está sucediendo ahora. Do not use it when: No hagas que la barra de progreso sea enfocada o ajustable. Usa un control deslizante cuando la persona controle el valor. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Barra de progreso (Progressbar) is used now. Definition: Una barra de progreso muestra cuánto de una tarea cronometrada se ha completado. Las personas pueden leerla pero no controlarla directamente. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.