AnimatedCircularProgressBar
SVG ring that animates stroke-dashoffset to a target percentage. Numeric label centered. Ideal for dashboards, onboarding, and skill meters.
When to Use
- Progress indicators for file uploads, form completion, or profile setup.
- Skill meters or proficiency gauges in portfolio and resume layouts.
- Dashboard KPI rings that animate in on first render.
25%
50%
75%
100%
68%
API Reference
AnimatedCircularProgressBar
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Progress value 0–100. |
| Size | int | 120 | Overall size in pixels. |
| StrokeWidth | int | 8 | Ring stroke width in pixels. |
| DurationMs | int | 800 | CSS transition duration in milliseconds. |
| LabelContent | RenderFragment? | null | Custom label rendered inside the circle. Defaults to percentage text. |
| Class | string? | null | Additional CSS classes. |
Related Components
- NumberCountUp — Count-up number with thousands separators, prefix, and suffix.
- NumberTicker — Animated number ticker.