shadcn.io is not affiliated with official shadcn/ui
Progress examples · Basic
Complete Progress for React
A progress bar at 100 percent, filled to the end of its track.
Framework
UI library
A progress bar at 100, the task done. Show it briefly before moving on, or swap it for a message that says what finished.
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 100 on the default range of 0 to 100, so the fill covers the whole track. w-full max-w-md sets its width.
Does the bar turn green at 100?
No. The fill stays bg-primary at every value. To show success, add a color class, as Success does, or replace the bar with a message.
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
- Three Quarters ProgressA progress bar at 75 percent, close to
- Half ProgressA progress bar at 50 percent, filled to
- Badge with Text (Standard)A default badge with a short label for a
- Success with Title AlertA success alert with only a title, for a
- Default SpinnerA spinner at its default size and color
- Empty ProgressA progress bar at 0 percent: an empty