W3Docs

Apparence

Français

Balise HTML <progress> ​

La balise <progress> est l’un des éléments HTML5. Elle sert à afficher l’avancement d’une tâche (barre de progression). Les valeurs de la barre de progression qui changent dynamiquement doivent être définies à l’aide de scripts (JavaScript).

L’apparence de l’élément peut varier selon le navigateur et le système d’exploitation.

Nous recommandons d’utiliser la balise <meter> pour représenter une jauge (par exemple, la pertinence d’un résultat de recherche).

Syntaxe ​

La balise <progress> s’utilise par paire. Le contenu est écrit entre les balises ouvrante (<progress>) et fermante (</progress>).

Exemple de la balise HTML <progress> : ​

Balise HTML <progress>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Résultat ​

progress tag example

Barre de progression ​

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

Il est plus facile de styliser la barre de progression indéterminée, car elle n’a pas l’attribut value. Nous pouvons la styliser à l’aide de la pseudo-classe CSS de négation :not().

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

Styliser les barres de progression ​

Chrome, Safari et la dernière version d’Opera (16+) appartiennent à cette catégorie. Le style de l’apparence de l’élément <progress> peut être défini à l’aide de -webkit-appearance: progress-bar.

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

Exemple d’une barre de progression

css
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 :

html
<!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>
    <span>Loading:</span>
    <progress value="30" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Ensuite, vous pouvez rencontrer des problèmes, car différents navigateurs fournissent des pseudo-éléments distincts pour styliser 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 stylise le conteneur de l’élément de progression.
  • ::-webkit-progress-value, qui stylise la valeur à l’intérieur de la barre de progression.

Stylisez ::-webkit-progress-bar avec différentes propriétés CSS :

Exemple d’une barre de progression

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

Stylisez ::-webkit-progress-value, qui correspond à la barre elle-même, 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

css
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 :

html
<!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>
Try it Yourself »

Firefox ​

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

Exemple de la barre <progress> dans Firefox

html
<!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>
Try it Yourself »

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, nous ne pouvons pas styliser l’arrière-plan du conteneur dans Firefox.

Balise HTML <progress> - Firefox

css
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 : ​

Exemple de la balise HTML <progress> pour Firefox :

html
<!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>
Try it Yourself »

Exemple d’utilisation d’une barre de progression sympa en faisant défiler la page ! ​

Voici un exemple montrant comment créer une barre de progression qui indique jusqu’où vous avez fait défiler la page :

exemple de création d’une barre de progression qui indique jusqu’où vous avez fait défiler la page

html
<!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>
Try it Yourself »

Dans cet exemple, nous avons un élément div en position fixe avec un id de progress-bar qui sert de conteneur pour la barre de progression. À l’intérieur de ce conteneur, nous avons un autre élément div avec un id de progress-bar-fill qui sert de barre de progression réelle.

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 pour la barre de progression et 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 nous 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, ce qui met à jour la barre de progression.

Vous pouvez copier ce code dans un nouveau fichier HTML et l’ouvrir dans votre navigateur pour voir son apparence. Lorsque vous faites défiler la page vers le bas, la barre de progression se met à jour pour refléter la distance parcourue. Vous pouvez ajuster la hauteur et la couleur de la barre de progression selon vos besoins.

Attributs ​

AttributValeurDescription
maxnumberDéfinit la valeur maximale du processus en cours. La valeur peut être un nombre positif supérieur à 0.
valuenumberDéfinit la taille de la tâche terminée. La valeur peut être un nombre compris entre 0 et le nombre indiqué dans l’attribut max, ou un nombre dans l’intervalle 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.

Practice ​

What does the HTML progress tag represent?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.