progress and meter
<progress> shows task completion. <meter> shows a measurement within a known range, like disk usage or score.
HTML
Beginner
3 min read
progress and meter Elements
Example
<!-- Task progress (0-100%) -->
<label>Uploading: <progress id="bar" value="70" max="100">70%</progress></label>
<!-- Measurement with good/bad ranges -->
<label>Disk usage:
<meter value="75" min="0" max="100"
low="60" high="80" optimum="30">75 GB used</meter>
</label>
<label>Score:
<meter value="85" min="0" max="100" optimum="100">85/100</meter>
</label> Pro Tip
Use progress for deterministic tasks; meter for measurements with meaningful thresholds.