Circular Progress
A circular progress indicator with customizable size, thickness, and color variants.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The progress value. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
size | number | 48 | The diameter in pixels. |
thickness | number | 4 | The stroke thickness in pixels. |
variant | 'default' | 'destructive' | 'success' | 'warning' | 'info' | 'neutral' | 'default' | The color variant. |
Sub-components
CircularProgressTrack
Background circle
CircularProgressRange
Filled progress arc
CircularProgressIndicator
Animated indicator
CircularProgressLabel
Center text label