Skip to content

Progress & Meter

Progress

<label>Determinate (65%)</label>
<progress value="65" max="100"></progress>

<label>Indeterminate</label>
<progress></progress>

Meter

<label>Disk usage (optimum)</label>
<meter min="0" max="100" low="25" high="75" optimum="50" value="40"></meter>

<label>Memory usage (sub-optimum)</label>
<meter min="0" max="100" low="25" high="75" optimum="25" value="65"></meter>

<label>CPU usage (critical)</label>
<meter min="0" max="100" low="25" high="75" optimum="25" value="90"></meter>

Output

+ = 75 
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="a" name="a" value="25">
  <span>+</span>
  <input type="range" id="b" name="b" value="50">
  <span>=</span>
  <output name="result" for="a b">75</output>
</form>