<progress>
Montrer l'avancement d'une tâche : téléchargement, formulaire, quiz
<progress> — La barre de progression
La balise <progress> représente l'avancement d'une tâche. Elle affiche une barre de progression native. Sans attribut value, elle indique une tâche indéterminée (chargement en cours).
Quand l'utiliser
Tu veux montrer l'avancement d'un téléchargement, d'un envoi de formulaire, d'un quiz multi-étapes ou de toute opération dont la durée est estimable.
Ce que tu gagnes
Accessibilité : les lecteurs d'écran annoncent le pourcentage de progression. L'élément a le rôle progressbar nativement, pas besoin d'ARIA.
Exemple de code
<label for="upload">Upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- Indeterminate (loading) -->
<progress>Loading...</progress>Pour aller plus loin
- Les soupes de div — remplacer les
<div>par des balises sémantiques - WHATWG —
<progress> - W3C — HTML spec
- MDN —
<progress>