Meter

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

Basic Usage

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

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

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

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