Playground de progress en HTML

Explora progress con controles para el valor actual, el máximo de la tarea y el estado indeterminado que se obtiene al omitir el atributo value.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Contenido

Etiqueta accesible

El texto dentro de progress solo funciona como fallback. Usa label, aria-label o aria-labelledby para proporcionar un nombre accesible.

Incluir texto fallback

El contenido entre las etiquetas de progress sirve como fallback para navegadores antiguos, pero no sustituye a una etiqueta accesible.

Atributos y estado

Estado indeterminado

Al activar este estado se elimina el atributo value. El navegador muestra que la actividad continúa sin comunicar cuánto falta.

Determinado

Subiendo portfolio.zip 68%

HTML

<label for="task-progress">Subiendo portfolio.zip</label>
<progress id="task-progress" max="100" value="68">
  68%
</progress>