The Circular Progress Ring Is Just One SVG Circle + Two CSS Props

That circular progress ring you see in every dashboard? It's one <circle> and two CSS properties. No library. Here's a live, animated rebuild with a slider, a count-up number, and an indeterminate spinner.

⭕ Try it (drag the slider): https://dev48v.infy.uk/design/day14-progress-ring.html

The whole trick: dasharray + dashoffset

An SVG circle's outline can be turned into a dash pattern. Set stroke-dasharray to the full circumference, and stroke-dashoffset controls how much of it is hidden. Offset = circumference → fully hidden (0%); offset = 0 → fully drawn (100%).

The math

circumference = 2 × π × r. For a given percent: offset = circumference × (1 − percent/100). That's it — drive that one number and the ring fills.

The finishing touches

Rotate the circle −90° so it starts at 12 o'clock, add stroke-linecap: round for the polished cap, put a track circle behind it, and a CSS transition on the offset animates the fill. The center number counts up in JS.