Progreso, skeletons y carga.
El patrón de carga depende de si el tiempo o porcentaje es conocido y de cuánto contenido puede conservarse.
Cuándo usar
El patrón de carga depende de si el tiempo o porcentaje es conocido y de cuánto contenido puede conservarse.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
68% · quedan cerca de 40 segundos
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Nombre de la operación |
| 2 | Indicador |
| 3 | Valor o tiempo |
| 4 | Cancelar cuando aplica |
| 5 | Resultado |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| indeterminate | Spinner o texto para espera breve |
| determinate | Progress con valor medido |
| skeleton | Reserva forma de contenido estable |
| long-running | Tiempo, pasos o retorno posterior |
| stalled | Umbral y recuperación |
Accesibilidad
- aria-busy en la región actualizada.
- Progress recibe nombre y valor.
- No anunciar cada cambio del porcentaje.
- Reduced motion elimina shimmer y giros no esenciales.
HTML de referencia
<label for="progreso">Importando registros</label>
<progress id="progreso" value="68" max="100">68%</progress>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.