Progress and meter

progress

<progress> shows how far a task has run. <meter> shows where a value sits in a range, and colours itself from low, high and optimum.

Basic

Indexing62%62% of 4,210 pages Disk used82%82% of the build cache

html

<div data-grid="2">
  <label data-field><span>Indexing</span><progress value="62" max="100">62%</progress><small>62% of 4,210 pages</small></label>
  <label data-field><span>Disk used</span><meter value=".82" low=".6" high=".8" optimum=".2">82%</meter><small>82% of the build cache</small></label>
</div>

The text inside the element is the fallback a browser without support shows, so write the number there.

Notes

<progress> always fills with the go tone; a <meter> moves from go to earth to stop as it leaves the good range.
Both are inset wells, drawn with --s72-sink.
The bar has no accessible name of its own, so wrap it in a label[data-field] or give it aria-label.