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.
Bonus: the spinner
An indeterminate version is just a short fixed dash that rotates forever with @keyframes.
🔨 Full build (circle → dasharray → percent→offset → transition → spinner) on the page: https://dev48v.infy.uk/design/day14-progress-ring.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)