Meter

Scalar-value bar based on <progress>.

A bar that represents a scalar value within a known range — disk usage, battery level, vote count. Unlike <progress>, it's not about progress over time; it's a snapshot.

The native <meter> element colours itself automatically based on where the value falls relative to low, high and optimum.

Optimum (green)

Suboptimum (yellow)

Even-less-good (red)

<label for="storage">Storage free</label>
<meter id="storage"
       value="82" min="0" max="100"
       low="30" high="80" optimum="100">
  82 GB
</meter>

Attribute summary

value

Current reading.

min / max

Range boundaries. Defaults to 0 / 1.

low / high

Define the bands that colour the bar.

optimum

Where the "best" value sits — the browser picks the colour accordingly.

When to use meter vs progress

Meter

A fixed capacity — how full something is right now.

Progress

An ongoing task — how far it's got toward completion.