Meter

Scalar measurements with the native meter element — optimum ranges get distinct colors automatically.

Basic Meter

Disk usage 60%

<label>
  Disk usage
  <meter value="0.6" min="0" max="1">60%</meter>
</label>

Optimum Ranges

Set low, high, and optimum to drive green / yellow / red fills based on the current value.

Battery (optimum) 85% Battery (suboptimum) 50% Battery (low) 15%

<label>
  Battery (optimum)
  <meter min="0" max="100" low="30" high="70" optimum="80" value="85">85%</meter>
</label>

<label>
  Battery (suboptimum)
  <meter min="0" max="100" low="30" high="70" optimum="80" value="50">50%</meter>
</label>

<label>
  Battery (low)
  <meter min="0" max="100" low="30" high="70" optimum="80" value="15">15%</meter>
</label>

Inline Meter

Storage used: 7 out of 10

<p>
  Storage used:
  <meter value="7" min="0" max="10">7 out of 10</meter>
</p>