El elemento progress muestra una barra que representa un valor numérico dentro de un rango especificado. El elemento progress se configura con los atributos value (el valor visualizado) y max (valor máximo posible).

El siguiente fragmento de código muestra un 50% de finalización de una tarea:

<h1>Informe de progreso</h1>
<progress value="5" max="10">50%</progress>
Progreso hacia nuestra meta

Elemento <progress></progress>

Un elemento de progreso debe tener una etiqueta de inicio (es decir <progress>) y una etiqueta de final (es decir </progress>).

Aparte de los atributos globales, puede tener dos atributos más:

  • max: Indica la cantidad de tareas que deben realizarse antes de que puedan considerarse completas. Si no se especifica, el valor predeterminado es 1.0.
  • value: Indica el estado actual de la barra de progreso. Debe ser mayor o igual que 0.0 y menor o igual que 1.0o o el valor del atributo max (si está presente).

¡Deja tus dudas en los comentarios!

Etiqueta PROGRESS
5 (100%) 5 votos