Progress
ProgressBar shows the progress of a running task, with a known percentage or as indeterminate.
Use it for tasks that take longer than a few seconds, such as uploading files, installing or syncing. When the total amount of work is known, pass
value (0 → max); otherwise leave value out and the bar keeps moving. Use the semantic colors (success/warning/error) only to report the result, and always add text that describes it.Uploading files
6 of 10 files · about 1 minute left
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { ProgressBar } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Syncing folder…
Indeterminate
Leave out value when the total time is unknown.
Color, thickness & shape
thickness medium (2px) / large (4px); shape rounded / square. Without a label, set aria-label.
Q3 report.pdf
0%
Updating over time
Switch to success when the task finishes and update the description to match.
Usage
Do
- Add a label that describes the task and, where possible, the time or amount left.
- Switch to the determinate form as soon as the total amount of work is known.
- Switch to success / error when the task ends, with text that explains the result.
Don't
- Don't use it for tasks under 1–2 seconds. Use Spinner or show nothing.
- Don't let the bar move backward or sit at 99% for a long time.
- Don't use color as the only signal for an error.
Props
| Prop · Type | Default | Description |
|---|---|---|
| valuenumber | Default: — | Value from 0 to max. Leave it out for an indeterminate bar. |
| maxnumber | Default: 1 | Maximum value. |
| thickness"medium" | "large" | Default: "medium" | Thickness 2px / 4px. |
| shape"rounded" | "square" | Default: "rounded" | Rounded or square ends. |
| color"brand" | "success" | "warning" | "error" | Default: "brand" | Bar color. |
| label / descriptionReactNode | Default: — | Label above and description below (aria attributes are set automatically). |
| rootClassNamestring | Default: — | Class for the outer wrapper when there is a label / description. |