Overview
ProgressRing displays completion percentage as a circular gauge with optional center label and threshold-based coloring. Great for showing completion percentage, goal progress, or health metrics.
Features
- Three sizes: small, medium, large
- Threshold-based auto-coloring (danger, warning, success)
- Custom colors and track colors
- Animated fill on mount
- Optional center percentage and label
- Custom max value support
Examples
Basic Progress Ring
Simple progress with default styling
75%Complete
50%Progress
25%Started
Sizes
Small, medium, and large variants
65%Small
65%Medium
65%Large
With Thresholds
Auto-coloring based on value thresholds
80%Good
40%Warning
20%Critical
Custom Colors
Override default colors
72%Primary
85%Success
60%Info
Minimal Display
Ring only without center content
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | required | Current value (0-100 by default) |
max | number | 100 | Maximum value |
label | string | - | Label displayed below percentage |
size | "sm" | "md" | "lg" | "md" | Ring size variant |
showPercentage | boolean | true | Show percentage in center |
color | string | - | Ring color (overrides thresholds) |
thresholds | object | - | Auto-coloring thresholds (warning, danger) |
animated | boolean | true | Animate the ring fill |
Usage
import { ProgressRing } from '@/ui/components/charts';
// Basic progress ring
<ProgressRing value={75} label="Complete" />
// With thresholds (auto color based on value)
<ProgressRing
value={25}
label="Health"
thresholds={{ warning: 50, danger: 25 }}
/>
// Custom color and size
<ProgressRing
value={82}
label="Goal"
size="lg"
color="var(--success)"
/>