Progress
FeedbackVisual indicators for task completion or loading progress. Use progress bars to show determinate progress or loading states.
Import
import { Progress, CircularProgress } from "@/components/ui/progress";Usage
Linear Progress
Standard horizontal progress bar
Uploading...
Processing75%
Progress Sizes
Different sizes for various contexts
Small
Medium
Large
Circular Progress
Circular progress indicator
50%
75%
Completion States
Progress at various completion levels
Not started0%
In progress33%
Completed100%
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Current progress value (0-100) |
max | number | 100 | Maximum value |
label | string | — | Label text above the progress bar |
showValue | boolean | false | Display the current value |
size | "sm" | "md" | "lg" | "md" | Size of the progress indicator |