Donut Progress — Animated Percentage Ring with Label

<div class="dp-card">
  <div class="dp-ring" id="dpRing">
    <svg viewBox="0 0 120 120">
      <circle class="dp-track" cx="60" cy="60" r="52"/>
      <circle class="dp-bar" id="dpBar" cx="60" cy="60" r="52"/>
    </svg>
    <div class="dp-center"><strong id="dpVal">0%</strong><span id="dpCap">Complete</span></div>
  </div>
  <div class="dp-controls">
    <button type="button" class="dp-chip" data-v="25">25%</button>
    <button type="button" class="dp-chip" data-v="68">68%</button>
    <button type="button" class="dp-chip" data-v="92">92%</button>
    <input type="range" id="dpRange" min="0" max="100" value="68" aria-label="Progress">
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:40px 18px}

.dp-card{background:#1e293b;border:1px solid #334155;border-radius:18px;padding:24px;width:100%;max-width:300px;text-align:center}
.dp-ring{position:relative;width:180px;height:180px;margin:0 auto 18px}
.dp-ring svg{width:180px;height:180px;transform:rotate(-90deg)}
.dp-track{fill:none;stroke:#334155;stroke-width:11}
.dp-bar{fill:none;stroke:#22c55e;stroke-width:11;stroke-linecap:round;stroke-dasharray:326.7 326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1),stroke .4s}
.dp-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dp-center strong{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;color:#f1f5f9}
.dp-center span{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}

.dp-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.dp-chip{background:#0f172a;border:1px solid #334155;color:#cbd5e1;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.dp-chip:hover{border-color:#6366f1;color:#a5b4fc}
.dp-controls input[type=range]{width:100%;accent-color:#6366f1;margin-top:6px}

var bar = document.getElementById('dpBar');
var valEl = document.getElementById('dpVal');
var capEl = document.getElementById('dpCap');
var range = document.getElementById('dpRange');
var R = 52, CIRC = 2 * Math.PI * R; // ~326.7
var countTimer = null;

function color(p) { return p < 34 ? '#ef4444' : p < 67 ? '#f59e0b' : '#22c55e'; }

function setRing(p) {
  bar.style.strokeDashoffset = String(CIRC - (p / 100) * CIRC);
  bar.style.stroke = color(p);
  capEl.textContent = p >= 100 ? 'Done' : 'Complete';
}

// Animate the center number from its current value to the target.
function countTo(target) {
  cancelAnimationFrame(countTimer);
  var start = parseInt(valEl.textContent, 10) || 0;
  var t0 = null, dur = 700;
  function frame(now) {
    if (!t0) t0 = now;
    var k = Math.min((now - t0) / dur, 1);
    var eased = 1 - Math.pow(1 - k, 3);
    valEl.textContent = Math.round(start + (target - start) * eased) + '%';
    if (k < 1) countTimer = requestAnimationFrame(frame);
  }
  countTimer = requestAnimationFrame(frame);
}

function set(p) { p = Math.max(0, Math.min(100, p)); range.value = p; setRing(p); countTo(p); }

document.querySelectorAll('.dp-chip').forEach(function (c) { c.addEventListener('click', function () { set(parseInt(c.getAttribute('data-v'), 10)); }); });
range.addEventListener('input', function () { var p = parseInt(range.value, 10); setRing(p); valEl.textContent = p + '%'; capEl.textContent = p >= 100 ? 'Done' : 'Complete'; });

set(68);