Progress

modelValue is the current progress, read against max. It's clamped into range, so a value past the maximum fills the track rather than overflowing it, and a negative one reads as empty.

max is the value that counts as complete. Set it to the real total — bytes, steps, seats — and pass raw numbers as modelValue rather than working the percentage out yourself; the readout showValue prints is derived from the pair.

color themes the filled portion. The track behind it stays neutral in every variant, so the fill is what carries the meaning.

variant picks the shape and the weight at once. The four bar variants and the four circle* ones pair up one-to-one — circle with default, circle-lg with lg, and so on — so a ring always has the same line width as the bar it corresponds to. outline swaps the solid track for a hairline boundary with the fill inset inside it, which reads lighter on a busy surface. Each variant gets its own section further down.

size is the ring's diameter in pixels and applies to the circle* variants only — the bar variants ignore it, since their height comes from the variant. The line width doesn't scale with it, so a large ring stays as fine as a small one and a circle-lg at any diameter still reads as the heavier of the pair.

label names what's progressing — it sits above the bar, or below the ring for the circle* variants. Without it the indicator is a quantity with no subject, which only works when the surrounding copy already says what's being measured.

showValue prints the percentage next to the label on a bar, or centred inside the ring on a circle* variant. Add it when the exact figure matters as much as the shape — a quota, a download — and leave it off when only the direction does.

indeterminate runs a looping animation instead of a fixed fill, for work that's underway but whose completion you can't measure. modelValue and buffer are ignored entirely while it's set.

buffering runs an animated stripe over the bar, for progress that's moving but whose rate you can't report.

buffer draws a lighter fill behind the current value — how much is loaded ahead of where playback or processing has reached. Ignored while indeterminate is set.

A ring-only track with padding around the fill, instead of a solid filled background.

A taller version of the filled track, for more prominent progress indicators.

A taller version of the ring-only outline track.

A circular ring at the same line width as the default bar, sized by size. Everything the bar variants support works here too — buffer, indeterminate, label and value.

A hairline boundary ring with the fill inset inside it, instead of a solid background track — the ring equivalent of outline.

A thicker ring, matching lg's line width — for more prominent circular indicators.

The thicker ring's outline pairing — matching lg-outline's line width.