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

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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.

Dans cet article

Exemple interactif

<label for="file">Progression du fichier&nbsp;:</label>

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

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

Attributs

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é ; cela indique qu'une activité est en cours sans indication de la durée prévue.

Note : Contrairement à l'élément <meter>, la valeur minimale est toujours 0 et l'attribut min n'est pas autorisé pour l'élément <progress>.

Note : La pseudo-classe CSS :indeterminate peut être utilisée pour cibler les barres de progression indéterminées. Pour qu'une barre de progression redevienne indéterminée après lui avoir donné une valeur, il faut retirer l'attribut value avec element.removeAttribute('value').

Accessibilité

Étiquetage

Dans la plupart des cas, vous devez fournir une étiquette accessible lors de l'utilisation de <progress>. Vous pouvez utiliser les attributs ARIA standards d'étiquetage aria-labelledby ou aria-label comme pour tout élément avec role="progressbar", mais avec <progress>, vous pouvez aussi utiliser l'élément <label>.

Note : Le texte placé entre les balises de l'élément n'est pas une étiquette accessible, il est seulement recommandé comme solution de repli pour les anciens navigateurs qui ne prennent pas en charge cet élément.

Exemples

html
<label>
  Téléversement du document&nbsp;:
  <progress value="70" max="100">70 %</progress>
</label>

<!-- OU -->
<br />

<label for="progress-bar">Téléversement du document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

Résultat

Description d'une région particulière

Si l'élément <progress> décrit la progression du chargement d'une section d'une page, utilisez aria-describedby pour pointer vers l'état, et définissez aria-busy="true" sur la section qui est mise à jour, en supprimant l'attribut aria-busy lorsqu'elle a fini de charger.

Exemples

html
<div aria-busy="true" aria-describedby="progress-bar">
  <!-- le contenu de cette région est en cours de chargement -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Chargement du contenu…"></progress>

Résultat