Balise HTML <progress>

La balise <progress> est l'un des éléments HTML5. Elle représente la progression de la réalisation d'une tâche — quelle partie d'une opération (téléchargement de fichier, chargement, étape de formulaire, installation) a déjà été accomplie. Le navigateur affiche une barre de progression dont le remplissage reflète value par rapport à max.

Comme <progress> décrit uniquement l'avancement d'une tâche, les valeurs réelles changent généralement en cours d'exécution. Vous les mettez à jour avec JavaScript (voir l'exemple dynamique ci-dessous). L'apparence exacte de l'élément varie selon le navigateur et le système d'exploitation.

`<progress>` vs `<meter>`

Ces deux éléments se ressemblent mais ont des significations différentes — choisissez en fonction de l'intention, non de l'apparence :

Utilisez `<progress>` quand…	Utilisez `<meter>` quand…
Vous montrez l'avancement d'une tâche (elle progresse vers la fin).	Vous montrez une mesure statique dans une plage connue, comme l'utilisation du disque, un score ou la pertinence d'un résultat de recherche.
La valeur croît naturellement de 0 à `max` au fil du temps.	La valeur se situe quelque part sur une échelle fixe et n'est pas « en cours ».

Une règle pratique : si vous pouvez le terminer, utilisez <progress>. Si vous mesurez simplement un niveau, utilisez <meter>.

Syntaxe

La balise <progress> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<progress>) et la balise fermante (</progress>).

Exemple de la balise HTML `<progress>` :

Balise HTML <progress>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="35" max="100">35%</progress>
  </body>
</html>

Essayez vous-même »

Résultat

Le texte entre les balises (35% ci-dessus) constitue un contenu de repli : les navigateurs qui prennent en charge <progress> l'ignorent et affichent la barre, tandis que les très anciens navigateurs qui ne reconnaissent pas l'élément affichent le texte à la place. Il est recommandé de le maintenir synchronisé avec la valeur actuelle.

Accessibilité : toujours étiqueter votre barre de progression

Une barre <progress> sans étiquette est annoncée par les lecteurs d'écran sous forme de pourcentage sans contexte — « 35 pour cent » ne dit rien à l'utilisateur sur ce qui se charge. Donnez-lui un nom accessible de l'une des façons suivantes :

Un <label> dont l'attribut for correspond à l'id de la barre (comme ci-dessus). Cliquer sur l'étiquette est également une bonne affordance.
aria-labelledby pointant vers l'id d'un texte visible.
aria-label="…" lorsqu'il n'y a pas de texte visible à référencer.

<!-- Visible label referenced by the bar -->
<span id="upload-status">Uploading photos</span>
<progress aria-labelledby="upload-status" value="60" max="100">60%</progress>

<!-- No visible text? Use aria-label -->
<progress aria-label="Uploading photos" value="60" max="100">60%</progress>

Déterminée vs indéterminée

Une barre de progression peut être déterminée ou indéterminée.

Déterminée — vous savez où en est la tâche, vous fournissez donc une value. La barre se remplit proportionnellement (value ÷ max).
Indéterminée — vous savez que la tâche est en cours mais pas quelle proportion reste à faire, vous omettez donc l'attribut value. Le navigateur affiche une barre d'activité animée (une rayure ou un pulsation en mouvement) au lieu d'un remplissage fixe.

Exemple indéterminé

Omettez value pour obtenir l'état indéterminé, puis définissez-le dès que vous connaissez la valeur réelle :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="task">Working:</label>
    <!-- No value attribute → indeterminate (animated) -->
    <progress id="task" max="100">Working…</progress>
  </body>
</html>

C'est idéal lorsque vous attendez une réponse du serveur et ne pouvez pas encore calculer un pourcentage. Dès que vous le pouvez, passez le même élément en mode déterminé en définissant value via JavaScript (progress.value = 40).

Mise en forme des états déterminé et indéterminé

Il est plus facile de mettre en forme la barre indéterminée, car elle n'a pas d'attribut value — vous pouvez la cibler avec le sélecteur de négation CSS progress:not([value]).

La barre déterminée est ciblée par le sélecteur progress[value]. Ajoutez des dimensions avec les propriétés CSS width et height et définissez appearance à none :

Mise en forme des barres de progression

La méthode moderne simple : `accent-color`

Dans la plupart des cas, les préfixes vendeur ou les pseudo-éléments ne sont plus nécessaires. Définissez la propriété CSS accent-color et tout navigateur moderne teinte la barre uniformément avec une seule ligne :

progress {
  accent-color: #2563eb; /* color of the filled portion */
  width: 200px;
}

Recourez aux pseudo-éléments préfixés ci-dessous uniquement lorsque vous avez besoin d'un contrôle total sur la piste, de dégradés personnalisés, ou que vous devez prendre en charge des moteurs plus anciens.

WebKit/Blink (Chrome/Safari/Opera) — mise en forme fine héritée

Chrome, Safari et la dernière version d'Opera (16+) appartiennent à cette catégorie. La mise en forme de l'apparence de l'élément <progress> peut être réalisée en utilisant -webkit-appearance: progress-bar.

Définissez -webkit-appearance: none; pour réinitialiser les styles par défaut.

Exemple d'une barre de progression

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 15px;
}

Exemple de l'état déterminé de la barre de progression :

Exemple d'une barre de progression déterminée :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="30" max="100">30%</progress>
  </body>
</html>

Essayez vous-même »

Après cela, vous pouvez rencontrer des problèmes car différents navigateurs fournissent des pseudo-éléments distincts pour mettre en forme la barre de progression. Pour résoudre ce problème, vous pouvez utiliser des solutions de repli.

WebKit/Blink fournit deux pseudo-éléments :

::-webkit-progress-bar, qui met en forme le conteneur de l'élément progress.
::-webkit-progress-value, qui met en forme la valeur à l'intérieur de la barre de progression.

Mettez en forme ::-webkit-progress-bar avec différentes propriétés CSS :

Exemple d'une barre de progression

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}

Mettez en forme ::-webkit-progress-value, identique à la barre, avec plusieurs arrière-plans en dégradé pour différents usages. Utilisez le préfixe -webkit- pour les dégradés :

webkit-progress-value

progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
  border-radius: 4px;
  background-size: 20px 15px, 100% 100%, 100% 100%;
}

Exemple de la balise HTML `<progress>` utilisée avec des propriétés CSS :

Exemple de la balise HTML <progress> avec des propriétés CSS :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #cccccc;
        border-radius: 4px;
      }
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
        border-radius: 4px;
        background-size: 20px 15px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>

Essayez vous-même »

Firefox

En utilisant appearance: none, nous pouvons supprimer le biseau et l'embossage par défaut. Cependant, cela laisse une légère bordure dans Firefox, qui peut être supprimée avec border: none. Cela résout également le problème de bordure avec Opera 12.

Exemple de la barre <progress> sur Firefox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>

Essayez vous-même »

Firefox fournit un seul pseudo-élément (::-moz-progress-bar) qui peut être utilisé pour cibler la valeur de la barre de progression. En d'autres termes, il n'est pas possible de mettre en forme l'arrière-plan du conteneur dans Firefox.

Balise HTML <progress> - Firefox

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

Firefox ne prend pas en charge les pseudo-éléments ::before ou ::after sur la barre de progression, et n'autorise pas l'animation CSS3 keyframe sur la barre de progression, ce qui offre une expérience réduite.

Exemple de la balise HTML `<progress>` pour Firefox :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value]::-moz-progress-bar {
        background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, 
                          rgba(0, 0, 0, 0.1) 66%, transparent 66%), 
                          -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), 
                          rgba(0, 0, 0, 0.25)),
                          -moz-linear-gradient( left, #ff00f7, #4e922a);
        background-size: 35px 20px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>

Essayez vous-même »

Mise à jour d'une barre de progression avec JavaScript

Comme un vrai élément <progress> expose une propriété value, vous mettez à jour la barre simplement en lui assignant un nombre — le navigateur redessine le remplissage pour vous. Ici, un minuteur simule un téléchargement progressant de 0 à 100, puis s'arrête :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="download">Downloading:</label>
    <progress id="download" value="0" max="100">0%</progress>
    <span id="status">0%</span>

    <script>
      var bar = document.getElementById("download");
      var status = document.getElementById("status");
      var loaded = 0;

      var timer = setInterval(function () {
        loaded += 5;
        bar.value = loaded;          // moves the bar
        status.textContent = loaded + "%";
        if (loaded >= bar.max) {
          clearInterval(timer);
        }
      }, 300);
    </script>
  </body>
</html>

Pour passer une barre de l'état indéterminé à l'état déterminé en cours d'exécution, définissez sa value une fois que vous connaissez la valeur réelle (bar.value = 40). Pour revenir à l'état indéterminé, supprimez l'attribut avec bar.removeAttribute("value").

Barre de progression de défilement (alternative CSS uniquement)

L'élément ci-dessous est construit à partir de <div>s mis en forme, pas d'un vrai élément <progress>. C'est un motif courant pour un indicateur de défilement de page où vous souhaitez un contrôle total sur l'apparence. Si vous préférez un élément sémantique, vous pourriez remplacer le <div> par un <progress> et mettre à jour sa value dans le gestionnaire de défilement.

Voici comment créer une barre indiquant la progression du défilement dans la page :

exemple de création d'une barre de progression indiquant l'avancement du défilement dans la page

<!DOCTYPE html>
<html>
  <head>
    <style>
      #progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #ddd;
      }

      #progress-bar-fill {
        height: 100%;
        background-color: blue;
        width: 0%;
      }
    </style>
  </head>
  <body>
    <div id="progress-bar">
      <div id="progress-bar-fill"></div>
    </div>

    <h1>Scrollable Content</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>

    <script>
      window.addEventListener("scroll", function () {
        var progressBarFill = document.getElementById("progress-bar-fill");
        var scrollPosition = window.scrollY;
        var totalHeight = document.body.scrollHeight - window.innerHeight;
        var percentage = (scrollPosition / totalHeight) * 100;
        progressBarFill.style.width = percentage + "%";
      });
    </script>
  </body>
</html>

Essayez vous-même »

Dans cet exemple, nous avons un div en position fixe avec un id de progress-bar qui sert de conteneur. À l'intérieur, un autre div avec un id de progress-bar-fill sert de remplissage mobile. (Comme il s'agit d'un indicateur de défilement décoratif plutôt que d'une tâche, un simple <div> est acceptable ici ; un vrai <progress> fonctionnerait également si vous définissez sa value dans le même gestionnaire.)

Nous avons utilisé CSS pour définir la largeur et la hauteur initiales de la barre de progression, ainsi que les couleurs d'arrière-plan de la barre de progression et de son remplissage.

Nous avons également inclus un écouteur d'événement JavaScript qui écoute l'événement scroll sur l'objet window. Lorsque l'utilisateur fait défiler la page, nous calculons la position de défilement et la hauteur totale de la page, puis calculons le pourcentage de la page qui a été parcouru. Nous mettons à jour la propriété width de l'élément progress-bar-fill pour refléter ce pourcentage, mettant ainsi à jour la barre de progression.

Vous pouvez copier ce code dans un nouveau fichier HTML et l'ouvrir dans votre navigateur web pour voir le résultat. Au fur et à mesure que vous faites défiler la page, la barre de progression se mettra à jour pour refléter la progression du défilement. Vous pouvez ajuster la hauteur et la couleur de la barre de progression selon vos besoins.

Attributs

Attribut	Valeur	Description
max	nombre	Définit la valeur maximale du processus en cours. La valeur doit être un nombre positif supérieur à 0.
value	nombre	Définit la taille de la tâche accomplie. La valeur peut être un nombre de 0 jusqu'au nombre indiqué dans l'attribut `max`, ou un nombre dans la plage de 0 à 1 si l'attribut `max` n'est pas spécifié.

La balise <progress> prend également en charge les Attributs globaux et les Attributs d'événement.

Exercice

Pratique

Que représente la balise HTML progress ?

La progression de la réalisation d'une tâche, comme un téléchargement ou un chargementUne mesure statique dans une plage connue, comme l'utilisation du disqueLes détails du profil utilisateurUn lien de navigationUn champ de saisie

<progress> vs <meter>

Syntaxe

Exemple de la balise HTML <progress> :

Résultat

Accessibilité : toujours étiqueter votre barre de progression

Déterminée vs indéterminée

Exemple indéterminé

Mise en forme des états déterminé et indéterminé

Mise en forme des barres de progression

La méthode moderne simple : accent-color

WebKit/Blink (Chrome/Safari/Opera) — mise en forme fine héritée

Exemple de l'état déterminé de la barre de progression :

Exemple de la balise HTML <progress> utilisée avec des propriétés CSS :

Firefox

Exemple de la balise HTML <progress> pour Firefox :

Mise à jour d'une barre de progression avec JavaScript

Barre de progression de défilement (alternative CSS uniquement)

Attributs

Exercice

`<progress>` vs `<meter>`

Exemple de la balise HTML `<progress>` :

La méthode moderne simple : `accent-color`

Exemple de la balise HTML `<progress>` utilisée avec des propriétés CSS :

Exemple de la balise HTML `<progress>` pour Firefox :