Progress & meter
A horizontal bar that fills as a task progresses. Use for known-duration tasks; use a spinner for unknown ones.
Usage
A determinate progress bar. The fill width is the percent complete.
Tones
Brand by default. Success and warn variants for tonal indicators.
Brand · running
Success · 78 %
Warn · near capacity
Danger · over budget
With label
Pair with a label + value on the same line. Numbers are mono.
Term fees collected
$ 1.86 M / $ 2.04 M
91 % collected · on track
Spring term progress
Week 6 / 13
Meter (graded)
Use a segmented meter to show a graded measure — stock health, fuel tank, attendance band.
Stock health · 50 %
Fuel · 88 % · refill soon
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 6 px default | 8 with label · 4 in tight rows |
| radius | 9999 px | — |
| track | --surface-muted | — |
| fill | --brand by default | Success / warn / danger when tonal |
| transition | 120 ms ease-out | Width-only |
Do & don't
Do
Use progress for tasks with a known duration — uploads, payroll posting.
Don't
Use progress for indeterminate tasks. Use a spinner.
Do
Pair with a label and the underlying numbers (mono) so the operator sees the value, not just the bar.
Don't
Animate progress backwards. Once a bar moves up, it stays.