<progress> : l'élément d'indicateur de progression
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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 !
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'attributmax
est absent). Si l'attributvalue
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
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 du contenu phrasé. |
Rôles ARIA autorisés | Aucun. |
Interface DOM | HTMLProgressElement . |
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
BCD tables only load in the browser