Components
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Loading
Installation
pnpm dlx shadcn@latest add @toui/progress
Examples
Status
Loading
Circle
Loading
Radial
Spinner
Pattern
Tokens
6 CSS variables in 3 categories.
color
| CSS Variable | Value | Description |
|---|---|---|
--progress-color-main | var(--primary) | Primary color for the progress bar |
--progress-color-secondary | var(--secondary) | Muted background color for the progress track |
height
| CSS Variable | Value | Description |
|---|---|---|
--progress-height-sm | 1px | 1px |
--progress-height-md | 0.375rem | 6px |
--progress-height-lg | 0.5rem | 8px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--progress-radius | 9999px | Pill shape |
Credits
- Built with Radix UI Progress.