Circular Progress Ring — SVG HTML CSS JS Snippet

A circular progress ring shows completion as an arc filling around a circle rather than a horizontal bar — used for storage quotas, upload progress, goal completion, and dashboard KPI tiles where a compact round shape fits better than a linear one. This snippet builds the ring from two stacked SVG circles and animates the fill purely by rewriting one stroke property.

Two stacked circles

Each ring is an <svg> containing a .ring-track circle (the full gray background ring) and a .ring-fill circle drawn directly on top of it with an accent color. Both share the same cx, cy, and r — only the fill circle's stroke properties change to represent progress.

stroke-dasharray and stroke-dashoffset

stroke-dasharray is set to the circle's full circumference (2 × π × r, or 326.7 for r=52), which turns the stroke into one dash exactly as long as the circle itself — visually indistinguishable from a solid stroke at rest. stroke-dashoffset then shifts where that dash starts drawing from. Setting the offset equal to the full circumference makes the dash start exactly one full lap away, so none of the stroke is visible; setting it to circumference × (1 − pct/100) reveals exactly pct% of the ring. This is the standard SVG technique for drawable progress rings and expanding donut charts alike, and it needs no <canvas>, no clip-path, and no JavaScript-driven redraw loop.

Why the SVG is rotated -90deg

An SVG circle's stroke naturally starts drawing from the 3 o'clock position and proceeds clockwise. transform: rotate(-90deg) on the whole <svg> rotates that starting point to 12 o'clock, which is the conventional "empty to full, starting at the top" reading direction users expect from a progress ring.

Animating the fill

The CSS transition: stroke-dashoffset 0.5s cubic-bezier(.4,0,.2,1) means any JavaScript update to the offset animates smoothly rather than jumping instantly — setRing() only ever sets the target strokeDashoffset value once per call; the browser's compositor handles interpolating between the old and new value.

Percentage math lives in one function

setRing(el, valueEl, pct) is the single place that converts a percentage into a dashoffset and updates the paired numeric label — every ring on the page, regardless of size or color, calls the same function, so the circumference constant (CIRCUMFERENCE = 2 * Math.PI * 52) only needs to match the r value used in the SVG markup, and changing the ring's radius means updating exactly one number.

Threshold-based coloring

The three demo rings use three color modifier classes — .ring-fill (blue, default), .ring-warn (amber), .ring-danger (red) — applied as a plain class swap. In a real dashboard, choose the class based on the value itself (for example, red above 90%, amber above 70%, blue otherwise) so the ring communicates urgency without the user needing to read the number.

Sizing variants

The .ring-wrap.sm modifier only changes the container's width/height and the label's font size — because the SVG uses a viewBox rather than fixed pixel dimensions, it scales cleanly to any container size without recalculating the stroke width or dash values, though very small rings may need a thinner stroke-width to avoid the ring looking disproportionately thick.

Live updates from real data

The slider in the demo stands in for any real value source — replace its input event with a fetch response handler, a WebSocket message, or a polling interval, and call setRing() with the new percentage each time new data arrives.

See also the gauge chart for a half-circle variant of the same technique, and the quota usage meter for a linear-bar alternative to this ring.