<progress>

Ajouté dans HTML5

Résumé

L'élément HTML<progress> est utilisé pour visualiser l'avancement d'une tâche. Les spécificités de l'affichage sont gérées par le navigateur. Dans la majeure partie des cas, le navigateur affiche une barre de progression.

Attributs

Cet élément inclut les attributs globaux.

max
Cet attribut décrit le niveau maximal de progression à atteindre pour compléter une tâche.
value
Cet attribut définit le niveau de progression actuel (autrement dit, quelle fraction de la tâche a été effectuée). Il doit être compris entre 0 et max, ou entre 0 et 1.0 si max n'est pas utilisé. S'il n'y a pas d'attribut value, la barre de progression est indéterminée. Cela indique qu'une activité est en cours, sans pouvoir renseigner sur le temps qui reste jusqu'à sa complétion.

Vous pouvez utiliser la propriété CSS orient pour spécifier si la barre de progression doit être dessinée horizontalement (le comportement par défaut) ou verticalement. La pseudo-classe :indeterminate peut être utilisée pour manipuler les barres de progression indéterminées.

Exemple

<progress value="70" max="100">70 %</progress>

Résultat

Sur Mac OS X, l'élément résultant ressemble à ceci :

progress-1.png

Sur Windows, il ressemble à cela :

progress-firefox.JPG

Exemples supplémentaires

Voir orient.

Spécifications

Spécification Statut Commentaires
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 6.0 6.0 (6.0) [1][2] 10 11.0 5.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 6.0 (6.0) [1][2] Pas de support 11.0 Pas de support

Notes relatives à Gecko

[1] Gecko fournit le pseudo-élément ::-moz-progress-bar. Il permet de définir l'apparence de l'intérieur de la barre de progression (représentant la fraction de la tâche qui a été effectuée jusqu'à présent).

[2] Avant Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), l'élément <progress> était classé, de manière incorrecte, comme un élément de formulaire. , il avait donc un attribut form. Ce problème a été résolu.

Voir également

Pièces jointes

Fichier Taille Date Joint par
progress-1.png
6855 octets 2011-06-24 17:38:19 jkleinert
progress-firefox.JPG
8720 octets 2012-01-01 02:00:18 neilparikh
drop-down-icon
1224 octets 2013-08-28 06:57:35 gabriel_ivanica

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : Goofy, tregagnon, SphinxKnight, ethertank, teoli
Dernière mise à jour par : tregagnon,