A value inside a known range, like disk use or a password score,
using the native <meter> element.
Use <meter> for a measurement and
Progress for a task that moves
toward done.
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/meter.css" />Default
Without min and max, the range is
0 to 1.
<meter value="0.6"></meter>States
low and high split the range into three
parts. optimum says which part is good. The browser
compares the value with them, and the color follows: green when good,
yellow when not so good, red when bad.
<!-- a high value is good -->
<meter min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="20"></meter>
Put optimum in the low part when a low value is good,
like disk use.
<!-- a low value is good -->
<meter min="0" max="100" low="60" high="85" optimum="0" value="40"></meter>
<meter min="0" max="100" low="60" high="85" optimum="0" value="95"></meter>Labeled
Wrap in a <label class="field"> to give the meter a
name. Screen readers read the label with the value.
<label class="field">
<span>Storage</span>
<meter min="0" max="100" low="60" high="85" optimum="0" value="72"></meter>
<small>72 of 100 GB used</small>
</label>Colors
Each state reads its color from a custom property. Set
--meter-good, --meter-average or
--meter-bad to change one.
<meter value="0.6" style="--meter-good: var(--ui-primary)"></meter>