HTML progress : afficher la progression et passer à un état indéterminé

HTML <progress> indique la part accomplie d’une tâche. Définissez value et max pour une progression déterminée, ou omettez l’attribut value si la quantité totale de travail est inconnue. Cet élément ne mesure pas automatiquement les téléchargements ou téléversements.

Calculer la progression avec valeur et maximum

La valeur est le montant complété et max est le montant total. Une valeur de 20 avec max 100 signifie 20 % ; avec max 200, cela signifie 10 %. Lorsque max est omis, sa valeur par défaut est 1, donc 20 % s’écrit value="0.2". Utilisez un nombre valide supérieur à zéro pour max et une valeur comprise entre zéro et max.

Le minimum est toujours zéro ; la progression n’utilise pas d’attribut min. Envisagez d’utiliser meter pour une mesure dans une plage, telle que l’utilisation du stockage ou un score. Utilisez progress pour l’achèvement d’une tâche en cours.

Exemple complet : mettre à jour la progression et passer en mode indéterminé

Enregistrez ce code sous progress-demo.html et ouvrez-le dans un navigateur. Les boutons ne font que modifier les valeurs affichées pour la pratique ; ils ne transfèrent pas de fichiers.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progression et état indéterminé</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Exercice de progression</h1>
  <label for="work">Progression de la tâche d’exemple</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% terminé</p>
  <button type="button" id="advance">Passer à 80%</button>
  <button type="button" id="unknown">Total inconnu</button>
  <button type="button" id="reset">Réinitialiser</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'En cours';
        status.textContent = 'En cours : la quantité totale de travail est inconnue.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% terminé';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. L'état initial est complété à 20 %. Cliquez sur Passer à 80% pour changer à la fois la barre et sa description à 80 %.
2. Cliquez sur Total inconnu pour supprimer l'attribut value. Le navigateur affiche une progression indéterminée accompagnée d'une phrase expliquant que le total est inconnu.
3. Cliquez sur Réinitialiser pour restaurer l'attribut value et revenir à 20 %.

value="0" représente une progression déterminée avec aucun travail accompli ; ce n'est pas indéterminé. Pour passer un élément de progression existant en indéterminé, supprimez l'attribut comme l'exemple le montre. L'apparence et l'animation de la progression indéterminée peuvent varier selon le navigateur, le système d'exploitation et les paramètres de l'utilisateur.

Fournissez un nom de tâche et une phrase de statut

Le texte « 20 % » à l'intérieur de la barre de progression est un texte de repli pour les anciens navigateurs, et non un substitut au nom de la tâche. Associez une étiquette en utilisant des valeurs correspondantes pour for et id, ou fournissez un nom accessible ARIA approprié, pour identifier la tâche. Affichez l'état actuel en mots ainsi que par la couleur et la longueur de la barre.

Pour les tâches réelles, mettez à jour la valeur à partir des informations fournies par un serveur ou les événements de transfert. Remplir une barre avec un minuteur n'indique pas que le travail est terminé. Concevez des messages et actions séparés pour les erreurs, l'annulation et l'achèvement, et contrôlez la fréquence des annonces afin que les mises à jour de statut ne se répètent pas excessivement. La référence MDN sur la progression explique la syntaxe et les exigences d'accessibilité.