MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon, Goofy, ethertank, teoli
 Dernière mise à jour par : SphinxKnight,