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

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.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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).

Exemples

HTML

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

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-ms-fill
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element