shadcn.io is not affiliated with official shadcn/ui
Framework
UI library
A progress bar a quarter of the way across. Early progress is still worth showing: it tells people the task is moving.
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 25 on the default range of 0 to 100, so the fill covers a quarter 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
- Empty ProgressA progress bar at 0 percent: an empty
- Half ProgressA progress bar at 50 percent, filled to
- Three Quarters ProgressA progress bar at 75 percent, close to
- 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