Progress Circle
A circular progress indicator for tracking task completion or loading states.
Loading preview…
1
'use client';2
3
import { ProgressCircle } from 'sdaia-ui';4
5
export default function ProgressCircleRealWorld() {Installation
npx sdaia-ui@latest add progresscircle
Usage
import { ProgressCircle } from "@/components/ui/progress-circle"<ProgressCircle progress={75} />Examples
Sizes
Use `` for inline or compact placements.
Loading preview…
1
'use client';2
3
import { ProgressCircle } from 'sdaia-ui';4
import type { ProgressCircleSize } from 'sdaia-ui';5
Default
The default Primary progress circle.
Loading preview…
1
'use client';2
3
import { ProgressCircle } from 'sdaia-ui';4
5
export default function ProgressCircleDefault() {Neutral
Use `style="Neutral"` for a grey filled arc.
Loading preview…
1
'use client';2
3
import { ProgressCircle } from 'sdaia-ui';4
5
export default function ProgressCircleNeutral() {Half Circle
Use `shape="Half Circle"` for a gauge-style arc.
Loading preview…
1
'use client';2
3
import { ProgressCircle } from 'sdaia-ui';4
5
export default function ProgressCircleHalfCircle() {API Reference
ProgressCircleProps
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 |