HTML

          
<label for="value1">Low</label>
<meter id="value1" value="25" min="0" max="100" low="30" high="75" optimum="80"></meter>

<label for="value2">Medium</label>
<meter id="value2" value="50" min="0" max="100" low="30" high="75" optimum="80"></meter>

<label for="value3">High</label>
<meter id="value3" value="80" min="0" max="100" low="30" high="75" optimum="80"></meter>

CSS

label {
    display: block;
    margin-top: 15px;
}

meter {
    width: 300px;
    height: 20px;
}

Result




Back To TIL