v149 · CSS · demo

Progress Rings

Circular progress indicators driven by CSS custom properties and path-length: 100. The dash offset is just calc(100 - var(--pct)) — no circumference computation, no JavaScript geometry.

Checking support…

Master control — set all rings at once

0%
Storage
0%
Memory
0%
CPU
0%
/* CSS path-length: 100 normalises the coordinate space to 0–100 */
/* No need to compute circumference (2πr) in JavaScript */

circle.progress {
  path-length: 100;                        /* Chrome 149+  */
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--pct, 0));
  transition: stroke-dashoffset 0.4s ease;
}

/* Update progress with a single custom property */
el.style.setProperty('--pct', '75');

see also