HTML Meter & Progress | UI Elements Tutorial

HTML Meter and Progress

HTML <meter> and <progress> tags are used to display measurement and progress information on a web page. <meter> shows a value within a known range (like disk usage or rating), while <progress> represents task completion progress (like file upload or loading status). Both improve user experience and provide visual feedback.

2 views

5 min read

What are Meter & Progress?

<progress> = Shows how much of a task is complete (file upload, download)
<meter> = Shows a measurement within a range (battery, disk usage, score)

Progress Bar (Task completion):

1<!-- File upload progress -->
2<label>File Upload:</label>
3<progress value="65" max="100">65%</progress>
4<p>65% completed</p>
5
6<!-- Indeterminate (unknown progress - no value attribute) -->
7<label>Loading:</label>
8<progress id="loading"></progress>
9<p>Loading... (unknown time)</p>
10
11<!-- Download progress -->
12<label>Downloading:</label>
13<progress value="45" max="100">45% completed</progress>

Meter (Measurement within range):

1<!-- Disk usage (red if >75%) -->
2<label>Disk Usage (C:):</label>
3<meter value="0.8" min="0" max="1" low="0.25" high="0.75">80%</meter>
4
5<!-- Test score -->
6<label>Test Score:</label>
7<meter value="85" min="0" max="100" low="40" high="80">85%</meter>
8
9<!-- Battery level -->
10<label>Battery Level:</label>
11<meter value="0.65" min="0" max="1">65%</meter>
12
13<!-- CPU usage -->
14<label>CPU Usage:</label>
15<meter value="0.3" min="0" max="1">30%</meter>

Meter colors explained:

Color	Meaning
Green	Value is between low and high (GOOD)
Yellow	Value is near low or high (WARNING)
Red	Value is below low or above high (BAD)

Meter attributes:

Attribute	What it means
`min`	Minimum value (default 0)
`max`	Maximum value (default 1)
`value`	Current value
`low`	Low threshold (turns yellow/red below this)
`high`	High threshold (turns yellow/red above this)
`optimum`	Best possible value