0Pricing
HTML Academy · Leçon

Les éléments `progress` et `meter`

Affichez des valeurs d’avancement et de mesure avec le HTML natif.

Les éléments `progress` et `meter` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément progress

L’élément <progress> représente l’avancement d’une tâche :

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

Progression indéterminée

Sans value, la progression affiche une animation indéterminée :

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

Animer la progression avec JavaScript

Mettre à jour la progression dynamiquement :

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

L’élément meter

L’élément <meter> affiche une mesure scalaire dans une plage connue :

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

Attributs de meter

L’élément meter possède plusieurs attributs pour définir les plages optimales et d’avertissement :

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

États de couleur de meter

Les navigateurs associent automatiquement des couleurs à meter selon les valeurs basse, haute et optimale :

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

Utiliser meter pour l’espace disque

Cas d’utilisation classique de meter : l’espace disque ou la mémoire :

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

Force du mot de passe avec meter

Utilisez meter pour afficher la force du mot de passe :

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

Mettre en forme progress et meter

Mise en forme personnalisée de progress et meter :

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

Accessibilité de progress

Ajoutez des attributs ARIA pour améliorer la prise en charge des lecteurs d’écran :

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

Résumé : progress et meter

Distinction essentielle :

  • <progress> — avancement d’une tâche au fil du temps ; la valeur augmente jusqu’à max ; peut être indéterminé
  • <meter> — mesure scalaire statique ; la valeur est déjà connue ; possède des zones basse, haute et optimale

Quand utiliser chacun d’eux

Guide des cas d’utilisation :

  • progress — téléversement de fichier, assistant de remplissage de formulaire, barre de chargement
  • meter — espace disque, jauge de carburant, score de crédit, niveau de batterie, pertinence d’un résultat de recherche

Vérification rapide

Quel élément convient pour afficher le niveau de remplissage d’un disque dur ?

Récapitulatif : progress et meter

Éléments essentiels de progress et meter :

  • <progress max value> — avancement d’une tâche ; indéterminé sans value
  • <meter min max low high optimum value> — mesure statique
  • Le navigateur colore automatiquement meter selon la position optimale
  • Ajoutez aria-valuenow/min/max pour la prise en charge des lecteurs d’écran

Questions Fréquemment Posées

La leçon « Les éléments `progress` et `meter` » est-elle gratuite ?

Oui — le texte complet de « Les éléments `progress` et `meter` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Les éléments `progress` et `meter` » ?

Affichez des valeurs d’avancement et de mesure avec le HTML natif. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Les éléments `progress` et `meter` » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. `aside` : contenu complémentaire
  2. `figure` et `figcaption` revisités
  3. `details` et `summary` : composant d’affichage
  4. Les éléments `progress` et `meter`
← Retour à HTML Academy