Progress Ring
Anillo de progreso
Un círculo que muestra cuánto se ha avanzado de una tarea que se puede medir.
Un ejemplo real
Un anillo alrededor del icono de un archivo se llena de 0 a 100% durante una descarga. La tecnología de asistencia también recibe el número exacto.
Partes principales
- 01State signal
- 02Human-readable message
- 03Timing or progress
- 04Recovery path
Úsalo cuando
Úsalo cuando el progreso medible tenga poco espacio horizontal. También encaja con el progreso vinculado a un objeto pequeño.
No lo uses cuando
No hagas girar un anillo vacío cuando se desconoce el tiempo de espera. Eso es un indicador de carga, no un anillo de progreso.
Nombre usado en código
role=progressbar + aria-valuenow + SVG circle 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 Anillo de progreso (Progress Ring). User context: Un anillo alrededor del icono de un archivo se llena de 0 a 100% durante una descarga. La tecnología de asistencia también recibe el número exacto. Recommended pattern: Anillo de progreso (Progress Ring). Why it fits: Úsalo cuando el progreso medible tenga poco espacio horizontal. También encaja con el progreso vinculado a un objeto pequeño. Do not use it when: No hagas girar un anillo vacío cuando se desconoce el tiempo de espera. Eso es un indicador de carga, no un anillo de progreso. 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): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Anillo de progreso (Progress Ring) is used now. Definition: Un círculo que muestra cuánto se ha avanzado de una tarea que se puede medir. 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.