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