<output>, <progress>, <meter>
Display calculated values, task progress, and known-range gauges.
1Showing Values
<output> displays a calculated result. <progress> is for tasks where you do not know the total speed (loading bars). <meter> is for known ranges like disk usage.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="2" /> +
<input type="number" id="b" value="3" /> =
<output name="result">5</output>
</form>
<progress value="32" max="100">32%</progress>
<meter min="0" max="100" low="33" high="66" optimum="80" value="78">
78 / 100
</meter>2Put the element in context
Output presents a calculated result, progress describes task completion, and meter represents a value within a known range. A progress bar should reflect measurable progress rather than a decorative percentage. Each element still needs context so that the value is understandable.
3Practice with a small page
Build a small calculation with an output and a labeled progress indicator for a test operation. Compare a known percentage with an indeterminate state. Use meter for a range measurement and explain the unit or scale in nearby text.
Finished reading?
Mark this topic as complete to track progress.