Feedback/Progress
Progress
Linear and circular progress indicators with animated fills. Use to show upload progress, onboarding completion, or task status.
import { Progress, CircularProgress } from "@animui/ui"Basic
Upload progress
Progress0%
Variants
Sizes
Circular
72%
45%
Progress Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value (0–max). |
max | number | 100 | Maximum value. |
variant | "default" | "gradient" | "striped" | "glow" | "default" | Visual style of the progress bar fill. |
size | "xs" | "sm" | "md" | "lg" | "md" | Bar height. |
label | boolean | false | Show the percentage label above the bar. |
animated | boolean | true | Use a spring animation when the value changes. |
className | string | — | Additional classes for the wrapper. |
CircularProgress Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress value (0–max). |
max | number | 100 | Maximum value. |
size | number | 80 | Diameter in pixels. |
strokeWidth | number | 6 | Width of the circular track. |
label | boolean | true | Show percentage in the center. |
className | string | — | Additional classes for the wrapper. |