shadcn.io is not affiliated with official shadcn/ui
Progress examples · Basic
Empty Progress for React
A progress bar at 0 percent: an empty track before the work starts.
A progress bar at 0, before anything has happened: an upload that is queued, an onboarding not yet begun. The empty track shows that progress will appear here, and how far there is to go.
Preview
Installation
FAQ
What does the bar show?
value is 0, so the track is empty. The track is still drawn, so the bar keeps its place in the layout.
Is 0 the same as an indeterminate bar?
No. 0 is a measured amount: the work hasn't started yet.
Pass null as value when you can't measure the work; the bar then reports an indeterminate state.
For a wait with nothing to measure, a Spinner is usually clearer.
What is the accessible name?
aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.
Related
- Quarter ProgressA progress bar at 25 percent, early in
- Half ProgressA progress bar at 50 percent, filled to
- Complete ProgressA progress bar at 100 percent, filled to
- Default SpinnerA spinner at its default size and color
- Badge with Text (Standard)A default badge with a short label for a
- Three Quarters ProgressA progress bar at 75 percent, close to