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.
| 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 |
|---|---|---|
| WHATWG 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 (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 6.0 | (Oui) | 6.0 (6.0)[1][2] 14.0 (14.0)[2] |
10 | 11.0 | 5.2 |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | (Oui) | (Oui) | 6.0 (6.0)[1][2] 14.0 (14.0)[2] |
Pas de support | 11.0 | 7[3] |
[1] Avant Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), l'élément <progress> était considéré, à tort, comme un élément de formulaire et avait un attribut form. Cela a été corrigé.
[2] Gecko fournit le pseudo-élément ::-moz-progress-bar qui permet de mettre en forme la partie intérieure de la barre de progression qui correspond à la partie réalisée.
[3] Sur iOS, Safari ne prend pas en charge les barres de progression indéterminée (elles sont affichées comme des barrres de progression à 0%).