Circle Progress
Charts
Progress
Circular progress indicators for showing completion percentage and status.
Preview
Clean circular progress with percentage display
0%
Project Completion
0%
Goals Achieved
Sizes
Different sizes for various use cases
0%
Small
0%
Medium
0%
Large
Progress Steps
Multi-step progress visualization with checkmarks
Planning
100% complete
Design
100% complete
60%
Development
60% complete
0%
Testing
0% complete
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Progress value (0-100) |
size | number | 100 | Circle diameter in pixels |
strokeWidth | number | 8 | Stroke width of progress arc |
color | string | 'var(--color-indigo-500)' | Progress arc color |
trackColor | string | 'var(--color-slate-200)' | Background track color |
animate | boolean | false | Enable entrance animation |
animationDuration | number | 1000 | Animation duration in ms |
showValue | boolean | true | Show percentage in center |
children | ReactNode | — | Custom center content |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { CircleProgress } from '@/components/ui/circle-progress'
// Basic circle progress
<CircleProgress value={75} />
// With custom size and color
<CircleProgress
value={85}
size={140}
strokeWidth={10}
color="var(--color-indigo-500)"
animate
/>
// With custom center content
<CircleProgress
value={100}
color="var(--color-emerald-500)"
showValue={false}
>
<div className="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center">
<Check className="w-5 h-5 text-white" />
</div>
</CircleProgress>
// Multiple sizes
<CircleProgress value={85} size={80} strokeWidth={6} /> {/* Small */}
<CircleProgress value={65} size={120} strokeWidth={8} /> {/* Medium */}
<CircleProgress value={90} size={160} strokeWidth={10} /> {/* Large */}Features
Built-in functionality
- Smooth animation: Progress animates from 0 to target value on load
- Customizable: Adjust size, stroke width, and colors
- Rounded ends: Smooth rounded line caps for polished appearance
- Custom content: Children prop for custom center content
- Track background: Visible track shows full circle
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="progressbar" on containeraria-valuenow shows current valuearia-valuemin="0" and aria-valuemax="100"Keyboard Navigation
| Key | Action |
|---|---|
| N/A | Circle progress is not interactive |
Notes
- Percentage value visible in center by default
- Animation respects prefers-reduced-motion
- Screen readers announce progress value