A circular progress indicator for tracking task completion or loading states.
Loading demo: progresscircle-real-world
npx sdaia-ui@latest add progresscircle
import { ProgressCircle } from "@/components/ui/progress-circle"<ProgressCircle progress={75} />Use `` for inline or compact placements.
Loading demo: progresscircle-sizes
The default Primary progress circle.
Loading demo: progresscircle-default
Use `style="Neutral"` for a grey filled arc.
Loading demo: progresscircle-neutral
Use `shape="Half Circle"` for a gauge-style arc.
Loading demo: progresscircle-half-circle
Props for the ProgressCircle component.
Prop | Type | Default | Required |
|---|---|---|---|
value | number | 0 | optional |
variant | 'primary' | 'neutral' | 'primary' | optional |
shape | 'circle' | 'half-circle' | 'circle' | optional |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | optional |
valueText | boolean | true | optional |
labelText | boolean | false | optional |
label | string | 'Active Users' | optional |
direction | 'ltr' | 'rtl' | 'ltr' | optional |
animateOnView | boolean | false | optional |