⏳ HTML Progress & Meter

« Chargement… Veuillez patienter (Mais sérieusement, combien de temps ?) »

Il existe trois vérités universelles sur Internet :

• Le Wi-Fi disparaît toujours au moment le plus critique.
• Quand console.log fonctionne, tu te sens soudain comme un génie.
• La barre de progression reste toujours bloquée à 99 %.

Dans cet article, nous mettons sur la table les deux outils HTML qui testent notre patience :

• <progress> → Quelque chose se passe, presque fini… probablement.
• <meter> → Voici la situation. Prépare-toi mentalement.

Prends ton café ☕, car cet article est long, pédagogique, rempli d’exemples et légèrement déjanté.

🔄 1. La balise <progress>

« Quelque chose se passe, mais tu n’es pas encore libre »

La balise <progress> est utilisée pour des opérations qui avancent dans le temps ou par étapes.

Où est-elle utilisée ?

• Téléchargement de fichiers
• Traitement de vidéos / images
• Envoi de formulaires
• Opérations de mise à jour

En résumé :

Quelque chose commence, quelque chose se termine. Ce qu’il y a entre les deux, c’est le progress.

📌 Utilisation de base

<progress value="30" max="100"></progress>

🧠 Que se passe-t-il ici ?

• value → Ce qui est déjà terminé
• max → Le travail total à effectuer

Le navigateur dit en gros :

« 30 % terminé. Ne panique pas. »

🎯 Exemple concret : Téléchargement de fichier

<label for="upload">Téléchargement du fichier :</label>
<progress id="upload" value="75" max="100"></progress>

📌 Astuce :

• Sans label, les lecteurs d’écran sont tristes
• Quand ils sont tristes, le SEO est triste
• Ne rendons personne triste

❓ Progression indéterminée (la version agaçante)

<progress></progress>

Cette utilisation signifie :

« Quelque chose se passe, mais sans indication de durée. »

🧨 Attention :

• Laisser l’utilisateur ici trop longtemps provoque une perte de confiance
• Si possible, affiche un pourcentage — ça sauve des vies (émotionnellement)

🎨 Rendre la barre de progression plus charismatique avec CSS

(Parce qu’une barre moche ne rend personne heureux)

progress {
  width: 100%;
  height: 20px;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 10px;
}

✨ Désormais, ta barre de progression est :

• Plus arrondie
• Plus moderne
• Moins énervante

📏 2. La balise <meter>

« L’ami honnête qui dit la vérité »

La balise <meter> affiche le niveau actuel de quelque chose.
Elle n’a pas besoin d’être liée au temps.

Où est-elle utilisée ?

• Niveau de batterie 🔋
• Utilisation du disque 💾
• Notes ⭐
• Indicateurs de santé, performance et qualité

meter ne te donne pas d’espoir — il dit la vérité.

📌 Utilisation de base

<meter value="6" min="0" max="10"></meter>

🧠 Comment l’interpréter ?

• 0 → Le fond du gouffre
• 10 → Légendaire
• 6 → « Ça passe »

🚦 Utilisation avancée : Low, High, Optimum

<meter
  value="3"
  min="0"
  max="10"
  low="4"
  high="8"
  optimum="9">
</meter>

Que signifient ces valeurs ?

• low → Zone à risque
• high → Plutôt bien, mais attention
• optimum → Niveau idéal

📊 Le navigateur utilise ces valeurs pour ajouter des couleurs et des alertes visuelles.

☕ Exemple fun : Niveau de café

<label>État du café :</label>
<meter value="2" min="0" max="10" low="3" high="7" optimum="9"></meter>

☠️ Ce niveau dit clairement :

« Ne code pas. Bois d’abord un café. »

⚔️ Progress vs Meter

« Pas des jumeaux — même pas des cousins proches »

🧠 Règle d’or :

• Quand est-ce que ça se termine ? → progress
• Quel est l’état actuel ? → meter

♿ Accessibilité (la section du développeur responsable)

<label for="disk">Utilisation du disque :</label>
<meter id="disk" value="80" min="0" max="100"></meter>

✔ Utilise des labels
✔ Fournis des valeurs claires
✔ Ne force pas l’utilisateur à deviner

❌ Erreurs courantes

🚫 Utiliser meter pour un chargement
🚫 Utiliser progress pour un état
🚫 Oublier l’attribut value
🚫 Rester bloqué à 99 % (traumatisme émotionnel)

🧠 Mini résumé (mais en réalité très complet)

• <progress> → Décrit un processus
• <meter> → Décrit un état
• Les deux sont des bénédictions HTML5
• Bien utilisés, ils inspirent confiance aux utilisateurs