Meter

.meter is for scalar measurements within a known range.

Caveats

.meter uses browser-specific pseudo-elements to style its value bar.

Applicable Elements

meter

Basic Usage

Battery level: 72%
72%

<label>
  Battery level: 72%
  <meter class="meter" style="width: 240px;" min="0" max="100" value="72">72%</meter>
</label>

Ranges

Use low, high, and optimum to describe which parts of the range are desirable.

Battery level: 92%
92%Battery level: 55%
55%Battery level: 12%
12%

<meter class="meter" style="width: 240px;" min="0" max="100" low="20" high="80" optimum="100" value="92">92%</meter>
<meter class="meter" style="width: 240px;" min="0" max="100" low="20" high="80" optimum="100" value="55">55%</meter>
<meter class="meter" style="width: 240px;" min="0" max="100" low="20" high="80" optimum="100" value="12">12%</meter>