Build a real SVG circular progress ring with accurate circumference math. Adjust percentage, size, color and animation, then copy the code.
Every ring is built from the actual circumference of the circle, so the fill always lines up exactly with the percentage you set — at any size.
Circumference is computed as 2 × π × radius from your real size and stroke width.
Use a flat color or a two-stop SVG gradient stroke.
Sweep the ring from 0% to your target with a real CSS transition.
A circular progress ring is really just an SVG circle with a dashed stroke, where the dash pattern is set to exactly match the circle's own circumference. By making the dash the same length as the circle and then offsetting where that dash starts, you can reveal any fraction of the ring you like — 100% dash-offset hides it completely, and 0% offset shows the whole thing. Because the math is derived from the real circumference (2 × π × radius) rather than a fixed guess, the ring stays accurate no matter what size or stroke width you choose, which is why this generator recalculates it live instead of using a lookup table.
Set once to the circle's circumference, this creates a single dash exactly as long as the whole ring.
Shifting where that dash begins is what actually reveals or hides the progress arc.
A rounded stroke-linecap gives the ends of the arc a soft, pill-shaped finish instead of a hard edge.
Transitioning stroke-dashoffset with CSS produces a smooth, GPU-friendly fill animation with no JavaScript loop required.
This tool computes the circle's real circumference as 2 x pi x radius, then sets stroke-dasharray to that value and stroke-dashoffset to the circumference minus the percentage of it that should be filled, so the math always matches the ring's actual size.
Yes. Turn on animate-on-load and press Animate to see the ring sweep from 0 percent to the target percentage using a CSS transition on stroke-dashoffset, and the same transition rule is included in the copied code.
Yes. Turn on the gradient toggle and pick two colors to generate an SVG linearGradient definition, which the copied markup references directly.
Yes. The generated SVG includes role="img" and an aria-label describing the current percentage, so screen readers announce a meaningful value.
Yes. It is completely free, requires no account, and every calculation runs locally in your browser.
Keep building interfaces with these free online tools.