Meter

A visualization of where a value falls within a given range.

Basic Usage

You can style meter elements by giving them the meter class. Meters change color based on how their value compares with the low, high, and optimum attributes.

<!-- Low -->
<meter
  class="meter"
  min="0"
  max="100"
  low="33"
  high="67"
  optimum="100"
  value="10"
></meter>

<!-- Medium -->
<meter
  class="meter"
  min="0"
  max="100"
  low="33"
  high="67"
  optimum="100"
  value="50"
></meter>

<!-- High -->
<meter
  class="meter"
  min="0"
  max="100"
  low="33"
  high="67"
  optimum="100"
  value="90"
></meter>