<progress>

Description

L’élément <progress> représente l’avancement d’une tâche. Avec value et max, il montre une progression déterminée (ex. 60 %). Sans value, il affiche une animation de progression indéterminée. Le navigateur rend une barre de progression native, stylisable avec CSS.

Syntaxe

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

Exemples

Progression d’un upload :

<label for="upload">Téléversement :</label>
<progress id="upload" value="35" max="100">35 %</progress>
<span>35 %</span>

Progression indéterminée (chargement) :

<progress aria-label="Chargement en cours…"></progress>

Mise à jour JavaScript :

<progress id="bar" value="0" max="100">0 %</progress>
<script>
  let val = 0;
  const bar = document.getElementById('bar');
  const timer = setInterval(() => {
    bar.value = ++val;
    if (val >= 100) clearInterval(timer);
  }, 50);
</script>

Attributs spécifiques

Attribut	Type	Description
value	string	Valeur de progression actuelle. Si absent, la progression est indéterminée.
max	string	Valeur maximale (défaut : 1).

Notes

Contenu de repli : le contenu entre les balises (60 %) est affiché dans les navigateurs qui ne supportent pas <progress>. Bonne pratique même si le support est aujourd’hui universel.

<progress> vs <meter> : <progress> indique l’avancement d’une tâche (évolution dans le temps) ; <meter> représente une mesure statique dans une plage (jauge).