Progress

Progress

The bare bar. Drag the slider above to move it; hover the bar for the readout.

value

and max are all it needs — the percentage is derived from the two.

tooltip

shows the percentage in a bubble at the fill's edge on hover; pass a function to format it.

animate

is on by default: the fill sweeps in from zero when the bar first appears and every later change tweens instead of jumping. duration sets the mount run in milliseconds.

Circular progress

The same value, drawn as a ring.

circleSize={140}

sets the outer diameter in pixels; barSize still controls the ring thickness.

variant="glow"

lights the filled arc with the theme color instead of leaving it flat.

Circular with a custom center

Passchildren

to replace the centred percentage with anything — a count, an icon, a caption. As a function, (value, max) => node, it receives the value while it counts up so the centre animates with the arc.

Statuses

The four states side by side.

status="active"

is the default and draws the theme colour; the other three use the conventional semantic hues on every brand.

Indeterminate

Setindeterminate

when the duration is unknown. A short bar slides along the track; value is ignored and reduced-motion users get a still, full bar.

Step indicator

SetshowValue={false}

and give max a small number for wizard-style step progress.

Stage colours

Run it: neutral while starting, the brand colour from 10%, green at 100 — or red the moment it fails. The ring and the bar share one value, so they always agree.

stages

is a list of { from, color } — each colour takes over from its from percent until the next threshold. Works on Progress and CircularProgress alike.

status

on both Progress and ProgressField: "success", "warning" or "error" override every colour and turn the readout green, amber or red with a glyph.

hint

is one line under the bar — what happened, or what to do next — in the status colour.