<progress> : l'élément d'indicateur de progression

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <progress> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.

Exemple interactif

<label for="file">File progress:</label>

<progress id="file" max="100" value="70">70%</progress>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Attributs

Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

max: Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut max est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.
value: Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et max (ou entre 0 et 1 si l'attribut max est absent). Si l'attribut value est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).

Note : La valeur minimale est toujours 0 et il n'existe pas d'attribut min pour l'élément progress. La propriété CSS -moz-orient peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement. La pseudo-classe CSS :indeterminate permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser element.removeAttribute("value").

Exemples

HTML

html

<progress value="70" max="100">70 %</progress>

Résultat

Résumé technique

Catégories de contenu	Contenu de flux, contenu phrasé, contenu de formulaire (étiquetable), contenu tangible.
Contenu autorisé	Contenu phrasé sans élément `<progress>` parmi ses descendants.
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés	Aucun.
Interface DOM	`HTMLProgressElement`.

Spécifications

Specification
HTML # the-progress-element