shadcn.io is an independent project built on shadcn/ui
A bar at 70 percent. The fill is the success color, and the track is a lighter tint of it. No label is shown.
Use the success color when the task is going well, not as the default for every bar. A Status can mark done once you drop the meter. In Vue, Ark UI does not time the upload.
Installation
Anatomy
Usage
<Progress
aria-label="Upload progress"
class="w-full max-w-md **:data-[slot=progress-indicator]:bg-success *:data-[slot=progress-track]:bg-success/20"
:value="70"
/>FAQ
How is the bar colored?
With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-success colors the fill, which sits inside the track.
*:data-[slot=progress-track]:bg-success/20 tints the track.
Why the success token and not a palette color?
success is a theme color, so it follows light and dark mode and any theme you switch to. A class like bg-green-500 stays the same everywhere.
Does 70 pick the color?
No. value only sets the amount; the color classes apply at any value. Change them yourself when the state changes, such as when an upload fails.
What is the accessible name?
Ark UI puts the progressbar role on the track and names it with the value text, here 70%. The aria-label, Upload progress, sits on the root element, so put what the bar measures in visible text nearby when it matters.
API Reference
Progress
Sets aria-label="Upload progress" and value="70". The rest is on the Progress page.
