shadcn.io is an independent project built on shadcn/ui
A single bar at 75 percent. A short stretch of the track is still empty, and there is no visible caption.
Use it when the work is close to done and people should see that. Switch to a Spinner only if the last step has no known size. In Vue, Ark UI does not move the bar on its own.
Installation
Anatomy
Usage
<Progress aria-label="Upload progress" class="w-full max-w-md" :value="75" />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?
Ark UI puts the progressbar role on the track and names it with the value text, here 75%. The aria-label, Upload progress, sits on the root element, so put what the bar measures in visible text nearby when it matters.
How do I update the 75?
Change value as the work advances. This demo passes a fixed 75.
Always pass value: without one, Ark UI starts the bar at 50.
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 is visible text; the track, which has the progressbar role, is still named by its value text.
API Reference
Progress
Sets aria-label="Upload progress" and value="75". The rest is on the Progress page.
