📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › HTML Fundamentals › Progress and Meter

Progress and Meter

4 min read
progress shows task completion: <progress max='100' value='70'>. meter shows a scalar measurement within a range with low, high, and optimum attributes for colour coding. Both are more semantic than div bars.

Progress and Meter

<!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter -- scalar measurement -->
<meter value="6" min="0" max="10">6/10</meter>

<!-- Meter with thresholds -->
<meter value="85" min="0" max="100"
       low="33" high="66" optimum="90">
    85%
</meter>