SVG Progress Ring Component
A circular progress ring is built from an SVG circle with its stroke-dasharray and stroke-dashoffset driven by a percentage value.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Core Technique: stroke-dasharray and stroke-dashoffset
Setting a circle's stroke-dasharray to its own circumference creates one long dash equal to the full circle's length, and then adjusting stroke-dashoffset to a value between zero and that circumference reveals a proportional arc of the stroke, letting a simple offset calculation translate a percentage value directly into a visual progress ring.
- stroke-dasharray set to the circle's circumference creates one full-length dash
- stroke-dashoffset reveals a proportional arc based on the offset value
- A percentage value maps directly to the correct dashoffset through simple math
Animating and Updating the Progress Value
Because stroke-dashoffset is a standard animatable property, transitioning it smoothly with CSS or JavaScript when the underlying progress value changes produces a smooth animated fill effect, and rotating the circle -90 degrees typically positions the ring's start point at the top, matching the conventional visual expectation for a progress indicator.
- stroke-dashoffset transitions smoothly with standard CSS or JS animation
- Produces a smooth animated fill effect as the underlying value updates
- A -90 degree rotation typically starts the ring's fill from the top
Frequently Asked Questions
How do I calculate the circumference needed for stroke-dasharray?
Circumference equals 2 × π × radius, using the same radius value set on the circle element, and that calculated value becomes both the stroke-dasharray and the starting stroke-dashoffset for a ring showing zero progress.
Can I add a percentage label in the center of the progress ring?
Yes, a separate SVG text element centered within the ring (or an absolutely positioned HTML element on top) can display the current percentage value alongside the visual ring indicator.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG