shadcn.io is not affiliated with official shadcn/ui
Progress examples · Basic
Half Progress for React
A progress bar at 50 percent, filled to the halfway point.
Framework
UI library
A progress bar at the halfway mark: an upload half sent, a form half filled in. The same Progress as the other basic examples, with value set to 50.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
What does the bar show?
value is 50 on the default range of 0 to 100, so the fill covers half 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.
Related
- Quarter ProgressA progress bar at 25 percent, early in
- Three Quarters ProgressA progress bar at 75 percent, close to
- Empty ProgressA progress bar at 0 percent: an empty
- Complete ProgressA progress bar at 100 percent, filled to
- Badge with Text (Standard)A default badge with a short label for a
- Danger ProgressA progress bar at 25 percent in the