logo oujood
🔍

La balise HTML <progress> : afficher une barre de progression

OUJOOD.COM

À quoi sert la balise <progress> ?

Quand un utilisateur lance un téléchargement, une importation de fichier ou une longue opération, il a besoin de savoir où en est le traitement. La balise <progress> répond exactement à ce besoin : elle affiche une barre de progression native, sans plugin ni CSS complexe.

Introduite en HTML5, cette balise est aujourd'hui supportée par tous les navigateurs modernes. Elle s'utilise seule pour indiquer une tâche en cours (progression indéterminée), ou avec les attributs value et max pour afficher un pourcentage précis.

À ne pas confondre avec <meter>, qui sert à représenter une mesure statique (espace disque utilisé, pertinence d'un résultat). <progress> est réservé aux tâches qui avancent dans le temps.

Exemple : progression d'une tâche en cours

L'exemple ci-dessous affiche une barre de progression à 22 % sur 100. L'attribut value indique l'avancement actuel, max définit la valeur totale. Le texte entre les balises ("50%") s'affiche uniquement si le navigateur ne supporte pas <progress> — ce qui ne se produit plus en pratique en 2026.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Barre de progression</title>
  <style>
    #progressbar { border-radius: 6px; }
  </style>
</head>
<body>

  Avancement de la tâche :
  <progress id="progressbar" value="22" max="100">22%</progress>

</body>
</html>

Progression animée avec JavaScript

En production, la valeur de value est rarement fixe — elle évolue au fil du temps. On la met à jour avec JavaScript. L'exemple suivant simule une tâche qui progresse automatiquement jusqu'à 100 % :

  📋 Copier le code

<progress id="bar" value="0" max="100"></progress>
<span id="label">0 %</span>

<script>
  const bar = document.getElementById('bar');
  const label = document.getElementById('label');
  let val = 0;

  const timer = setInterval(function() {
    val++;
    bar.value = val;          // met à jour la barre
    label.textContent = val + ' %'; // affiche le pourcentage
    if (val >= 100) clearInterval(timer); // arrête quand c'est fini
  }, 50);
</script>

Progression indéterminée

Si on ne connaît pas la durée de la tâche à l'avance (chargement d'une ressource externe, par exemple), il suffit de ne pas renseigner l'attribut value. Le navigateur affiche alors une animation de chargement en boucle :

  📋 Copier le code

<!-- Pas d'attribut value = progression indéterminée -->
<progress max="100"></progress>

Les attributs de <progress>

La balise <progress> ne possède que deux attributs spécifiques, tous deux introduits en HTML5 :

Attribut Valeur Description
max nombre La valeur maximale que la tâche peut atteindre. Par défaut : 1.
value nombre L'avancement actuel de la tâche. Doit être compris entre 0 et la valeur de max. Si absent, la progression est indéterminée.

La balise <progress> accepte également les attributs globaux HTML et les attributs d'événement.

Compatibilité navigateurs

En 2026, <progress> est supportée nativement par tous les navigateurs modernes : Chrome, Firefox, Safari, Edge et Opera. Internet Explorer 9 et antérieurs ne la supportaient pas, mais cette génération de navigateurs est totalement hors d'usage aujourd'hui.

Par carabde | Mis à jour le 17 mai 2026

   Sommaire