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 !
| 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. |
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
maxest 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'attributmaxest absent). Si l'attributvalueest 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
<progress value="70" max="100">70 %</progress>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| HTML Living Standard La définition de '<progress>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<progress>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 6 | Oui | 61 2 | 10 | 11 | 6 |
max | 6 | Oui | 6 | 10 | 11 | 6 |
value | 6 | Oui | 6 | 10 | 11 | 6 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | Oui | Oui | 61 2 | 11 | 73 | Oui |
max | Oui | Oui | Oui | 6 | 11 | 7 | Oui |
value | Oui | Oui | Oui | 6 | 11 | 7 | Oui |
1. Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
2. Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
3. Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).