Progress Meter · Cirrus

The Progress Meter is a plain completion bar — not a native <progress> element, which can’t be styled consistently across engines without resetting its appearance in three vendor namespaces. This is a div pair carrying role="progressbar" so assistive tech still reads it as a measurement rather than decoration.

Anatomy

Requirements met 4 of 8

1 Label — what's being measured, left-aligned
2 Caption — optional counter, e.g. "4 of 8"
3 Track / fill — the bar itself

Variants

In progress

Requirements met 4 of 8

<ProgressMeter value={4} max={8} label="Requirements met" caption="4 of 8" />

Complete

tone="auto" (the default) switches the fill to the success tone once value reaches max.

Requirements met 8 of 8

<ProgressMeter value={8} max={8} label="Requirements met" caption="8 of 8" />

Without a label

<ProgressMeter value={2} max={13} />

Usage

✓ Do

Application Progress 3 of 13

Pair the bar with a caption stating the same fraction in words.

✕ Don't

Don't rely on the bar's fill alone — always give the fraction as text somewhere nearby.

Accessibility

role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax, and an aria-label derived from label or the raw fraction if none is given.

Props

Prop	Type	Default	Notes
`value`	`number`	—	Current progress.
`max`	`number`	—	Total to reach.
`label`	`string`	—	Text above the bar.
`caption`	`string`	—	Right-aligned counter above the bar.
`tone`	`"brand" \| "auto"`	`"auto"`	`"auto"` switches to success once complete.

Stepper — uses this internally for its “N of M” header bar.