Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<progress> : l'élément d'indicateur de progression
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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.
Exemple interactif
<label for="file">File progress:</label><progress max="100" value="70">70%</progress>label { padding-right: 10px; font-size: 1rem;}Attributs
Comme tous les autres éléments HTML, cet élément inclutles attributs universels.
maxCet 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.valueCet 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'attributmin pour l'élémentprogress. 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 utiliserelement.removeAttribute("value").
Exemples
HTML
<progress value="70" max="100">70 %</progress>Résultat
Résumé technique
| 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 ducontenu phrasé. |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | HTMLProgressElement. |
Spécifications
| Specification |
|---|
| HTML # the-progress-element |