ProgressCircle
ProgressCircle Component
Playground
65%
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| value | number | — | |
| size | selectsm | md | lg | — | |
| color | color | — | |
| showLabel | boolean | — | |
| label | text | — |
Default
65%
Sizes
45%
65%
85%
CustomColor
80%
WithLabel
42/100
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
color | color | — | Stroke color |
label | text | — | Custom label text |
showLabel | boolean | — | Show percentage label inside |
size | select | — | Size variant |
value | number | — | Progress value (0-100) |
Using ProgressCircletsx
import { ProgressCircle } from '@/components/ProgressCircle'
<ProgressCircle
value="..."
size="..."
color="..."
showLabel="..."
label="..."
/>Tokens Used
No design tokens detected