Component · Feedback · 19
Progress
Progress = a determinate bar for known waits and a spinner for unknown ones, always paired with a label.
Uploading dataset62%
Building indexDone
Waiting for the worker…
What is a Progress?
Progress tells the user how long. Name the track, the fill, and whether the wait is known or not.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- The text that names a field; keep it short and place it above the input.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- The invalid state — red border, message, and usually a blocked submit.
Anatomy
These are the parts to name in your prompt.
- 01 Track
- 02 Fill
- 03 Label
- 04 Percentage
When to use
- File uploads with a known byte count
- Multi-step flows showing step 2 of 4
- Waits longer than one second with no known total
Avoid when
- The wait is under 300ms — show nothing
- The total is unknown and the wait is long — use Skeleton
- It blocks the page and needs a decision — use Dialog
A bar that moves but never finishes is worse than a spinner — if the total is unknown, say so with indeterminate.
See also
Create a progress component.
STYLE
- 6px track #E5E5EA, 3px radius, #0071E3 fill with a 240ms width ease
- a 12px label above the track naming the work, percentage on the right
- a 16px indeterminate spinner variant for unknown totals
- complete state swaps the fill to #34C759 for 400ms
STATES
- indeterminate, in progress, complete, error #FF3B30
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui