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

Aller à :
  1. Attributs
  2. Exemples
  3. Spécifications
  4. Compatibilité des navigateurs
  5. Voir aussi

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 6Edge Support complet OuiFirefox Support complet 6
Notes
Support complet 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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.
IE Support complet 10Opera Support complet 11Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 6
Notes
Support complet 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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.
Opera Android Support complet 11Safari iOS Support complet 7
Notes
Support complet 7
Notes
Notes Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android Support complet Oui
maxChrome Support complet 6Edge Support complet OuiFirefox Support complet 6IE Support complet 10Opera Support complet 11Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 7Samsung Internet Android Support complet Oui
valueChrome Support complet 6Edge Support complet OuiFirefox Support complet 6IE Support complet 10Opera Support complet 11Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 7Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

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,