<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">Progression du fichier :</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
Attributs
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 est1. 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
0etmax(ou entre0et1si l'attributmaxest absent). Si l'attributvalueest absent, la barre de progression traduit un état indéterminé ; cela indique qu'une activité est en cours sans indication de la durée prévue.
Note :
Contrairement à l'élément <meter>, la valeur minimale est toujours 0 et l'attribut min n'est pas autorisé pour l'élément <progress>.
Note :
La pseudo-classe CSS :indeterminate peut être utilisée pour cibler les barres de progression indéterminées. Pour qu'une barre de progression redevienne indéterminée après lui avoir donné une valeur, il faut retirer l'attribut value avec element.removeAttribute('value').
Accessibilité
Étiquetage
Dans la plupart des cas, vous devez fournir une étiquette accessible lors de l'utilisation de <progress>. Vous pouvez utiliser les attributs ARIA standards d'étiquetage aria-labelledby ou aria-label comme pour tout élément avec role="progressbar", mais avec <progress>, vous pouvez aussi utiliser l'élément <label>.
Note : Le texte placé entre les balises de l'élément n'est pas une étiquette accessible, il est seulement recommandé comme solution de repli pour les anciens navigateurs qui ne prennent pas en charge cet élément.
Exemples
<label>
Téléversement du document :
<progress value="70" max="100">70 %</progress>
</label>
<!-- OU -->
<br />
<label for="progress-bar">Téléversement du document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>
Résultat
Description d'une région particulière
Si l'élément <progress> décrit la progression du chargement d'une section d'une page, utilisez aria-describedby pour pointer vers l'état, et définissez aria-busy="true" sur la section qui est mise à jour, en supprimant l'attribut aria-busy lorsqu'elle a fini de charger.
Exemples
<div aria-busy="true" aria-describedby="progress-bar">
<!-- le contenu de cette région est en cours de chargement -->
</div>
<!-- ... -->
<progress id="progress-bar" aria-label="Chargement du contenu…"></progress>
Résultat
Exemples
<progress value="70" max="100">70 %</progress>
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu phrasé, contenu é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ôle ARIA implicite | progressbar |
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLProgressElement. |
Spécifications
| Specification |
|---|
| HTML # the-progress-element |
Compatibilité des navigateurs
Voir aussi
- Créer des contrôles de formulaire verticaux
- L'élément
<meter> - La pseudo-classe CSS
:indeterminate - La propriété CSS
-moz-orient - Le pseudo-élément CSS
::-moz-progress-bar - Le pseudo-élément CSS
::-webkit-progress-bar - Le pseudo-élément CSS
::-webkit-progress-value - Le pseudo-élément CSS
::-webkit-progress-inner-element