Meter

On this page

# Intro

Meters are classless by default.

<meter min="0" max="100" low="25" high="75" optimum="50" value="50"></meter>

# Colors

Meter bar colors are handled automatically by setting the low, high, and optimum attributes along with the current value.

<meter min="0" max="100" low="25" high="75" optimum="100" value="10"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="50"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="80"></meter>

# Sizing

Meters can be sized using the -small, -normal, -medium, and -large classes.

<meter min="0" max="100" low="25" high="75" optimum="50" value="50" class="-small"></meter>

# Inverse

You can inverse the order of the coloring by adding the -inverse class.

<meter min="0" max="100" low="25" high="75" optimum="100" value="10" class="-inverse"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="50" class="-inverse"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="80" class="-inverse"></meter>