shadcn.io is not affiliated with official shadcn/ui
Progress examples · Basic
Three Quarters Progress for React
A progress bar at 75 percent, close to done.
A progress bar three quarters of the way across, when the end is in sight. Pair it with a label when people need to know what is nearly done.
Preview
Installation
FAQ
What does the bar show?
value is 75 on the default range of 0 to 100, so the fill covers three quarters of the track. w-full max-w-md sets its width.
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.
Which colors does it use?
The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.
What if my maximum isn't 100?
Pass value in the same units as the maximum.
Set max on Progress: 5 steps of 5 is max 5 and value 5.
How do I add a label?
Put a ProgressLabel inside Progress; it renders above the track. With Label Above shows it.
The label also names the bar, so you can drop the aria-label.
Related
- Half ProgressA progress bar at 50 percent, filled to
- Complete ProgressA progress bar at 100 percent, filled to
- Quarter ProgressA progress bar at 25 percent, early in
- Badge with Text (Standard)A default badge with a short label for a
- Default SpinnerA spinner at its default size and color
- Empty ProgressA progress bar at 0 percent: an empty