Progress
Usage
A determinate bar for work whose completion is known — an upload, a quota, a checklist. When you cannot say how far along something is, use a Spinner instead; a progress bar that stalls at an arbitrary percentage is worse than no bar.import { Progress } from '@summonware/ui';Best practices
DoPass `label` whenever the bar is not immediately adjacent to what it measures. It also becomes the accessible name.
DoSwitch tone as thresholds are crossed — primary, then warning near the limit, then danger at it.
Don'tAnimate a bar to imply progress that is not being measured.
Anatomy
Label rowOptional caption and percentage above the track.
Track *The full-width background.
Fill *The completed portion. Clamped to 0–100% so out-of-range values cannot overflow.
Examples
Common configurations, variations and states.Labelled
Storage used72%
Onboarding complete31%
Caption on the left, computed percentage on the right. The percentage is derived from value and max, never passed in.
Tones and thresholds
Well within limit38%
Approaching limit81%
At limit97%
Escalating tone as a quota fills. This is the pattern to reach for on anything with a hard limit.
Sizes
Small for inline use in a table row, medium as standard, large when the bar is the focus of the view.