<progress>
Une barre de progression pour une tâche : l’envoi d’un fichier, une installation ou l’avancement d’un cours.
- Affichage
- inline-block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant sans autres éléments
<progress>
Exemple
#<p><label for="course-progress">Cours HTML : 18 leçons sur 24</label></p>
<progress id="course-progress" value="18" max="24">75%</progress>Définition et utilisation
#L’élément <progress> montre l’avancement d’une tâche. L’attribut max définit le total (1 par défaut), et value l’avancement actuel, donc <progress value="7" max="10"> affichera une barre remplie à 70 %.
Sans attribut value, la barre est indéterminée : le navigateur affiche en général une animation d’attente qui signifie « quelque chose se passe, mais on ne sait pas combien de temps ça prendra ». C’est un bon état pendant la connexion au serveur, avant de connaître la taille du fichier.
<progress> sert à l’avancement dans le temps. Pour mesurer une valeur dans une plage, comme l’espace disque utilisé ou la force d’un mot de passe, utilisez <meter>. La barre a aussi besoin d’une étiquette, de préférence via <label> ou aria-label, pour qu’un lecteur d’écran sache à quoi correspond cet avancement.
Syntaxe
#<progress value="30" max="100">30%</progress>Attributs
#nombre de 0 à la valeur de `max`
L’avancement actuel. Sans cet attribut, la barre devient indéterminée et affiche une animation d’attente, comme sur la deuxième ligne de l’exemple.nombre positif (1 par défaut)
La valeur qui marque l’achèvement complet de la tâche. Vous pouvez indiquer un nombre de leçons, de mégaoctets ou d’étapes, plutôt que de tout convertir en pourcentages.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#value
nombre de 0 à la valeur de `max`L’avancement actuel. Sans cet attribut, la barre devient indéterminée et affiche une animation d’attente, comme sur la deuxième ligne de l’exemple.
<p>Envoi du fichier : <progress value="0.4" aria-label="Envoi du fichier">40%</progress></p>
<p>Connexion au serveur : <progress aria-label="Connexion au serveur"></progress></p>max
nombre positif (1 par défaut)La valeur qui marque l’achèvement complet de la tâche. Vous pouvez indiquer un nombre de leçons, de mégaoctets ou d’étapes, plutôt que de tout convertir en pourcentages.
<p>Étape 2 sur 5 <progress value="2" max="5" aria-label="Avancement de l’inscription"></progress></p>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Le texte entre les balises, par exemple « 75 % », n’est pas visible dans les navigateurs modernes. Si le chiffre doit être visible, écrivez-le à côté de la barre.
- Le plus simple pour changer la couleur de la barre est
accent-color, par exempleprogress { accent-color: #8b5cf6; }.
Entrées associées
#- <meter>Une jauge pour une valeur dans une plage connue : espace utilisé, résultat d’un test, niveau de batterie.
- <output>Le résultat d’un calcul ou d’une action de l’utilisateur, par exemple un total dans une calculatrice.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.