SVG Progress Ring — Free HTML CSS JS Snippet

<div class="scene">
  <div class="rings">
    <div class="ring-wrap">
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle class="track" cx="50" cy="50" r="40"/>
        <circle class="fill" cx="50" cy="50" r="40" id="r1" data-pct="75"/>
      </svg>
      <div class="ring-label"><span class="pct" id="p1">0</span>%<span class="desc">Performance</span></div>
    </div>
    <div class="ring-wrap">
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle class="track" cx="50" cy="50" r="40"/>
        <circle class="fill pink" cx="50" cy="50" r="40" id="r2" data-pct="92"/>
      </svg>
      <div class="ring-label"><span class="pct" id="p2">0</span>%<span class="desc">Accessibility</span></div>
    </div>
    <div class="ring-wrap">
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle class="track" cx="50" cy="50" r="40"/>
        <circle class="fill green" cx="50" cy="50" r="40" id="r3" data-pct="58"/>
      </svg>
      <div class="ring-label"><span class="pct" id="p3">0</span>%<span class="desc">SEO</span></div>
    </div>
  </div>
  <button class="replay" onclick="animateRings()">Replay ↺</button>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.scene { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.rings { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }

.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

svg { transform: rotate(-90deg); }

.track { fill: none; stroke: #1e293b; stroke-width: 8; }

.fill {
  fill: none; stroke: #6366f1; stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}
.fill.pink  { stroke: #ec4899; }
.fill.green { stroke: #10b981; }

.ring-label { text-align: center; transform: none; }
.pct { font-size: 20px; font-weight: 800; color: #f1f5f9; display: block; line-height: 1; }
.desc { font-size: 11px; color: #475569; display: block; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

.replay { padding: 8px 20px; background: none; border: 1px solid #334155; border-radius: 8px; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.replay:hover { border-color: #6366f1; color: #6366f1; }

const CIRCUMFERENCE = 2 * Math.PI * 40; // 251.2

function animateRings() {
  document.querySelectorAll('.fill').forEach((circle, i) => {
    const pct = parseFloat(circle.dataset.pct);
    const pctEl = document.getElementById('p' + (i+1));
    circle.style.strokeDashoffset = CIRCUMFERENCE;
    pctEl.textContent = '0';

    setTimeout(() => {
      circle.style.strokeDashoffset = CIRCUMFERENCE * (1 - pct / 100);
      let cur = 0;
      const step = pct / 60;
      const t = setInterval(() => {
        cur = Math.min(pct, cur + step);
        pctEl.textContent = Math.floor(cur);
        if (cur >= pct) clearInterval(t);
      }, 20);
    }, i * 150);
  });
}

animateRings();