# AnimatedCircularProgressBar

Source: https://lumeo.nativ.sh/components/animated-circular-progress-bar

# 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.

Preview Code

Default (50%)

25%

50%

75%

100%

Copy Code

Preview Code

Custom Size & Stroke

68%

Copy Code

## 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](/components/number-count-up) — Count-up number with thousands separators, prefix, and suffix.
-   [NumberTicker](/components/number-ticker) — Animated number ticker.