Progress ring

<div class="ring-demo">
  <div class="ring" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="--progress: 40">
    <svg viewBox="0 0 120 120" aria-hidden="true">
      <circle class="ring-track" cx="60" cy="60" r="52" pathLength="100"/>
      <circle class="ring-fill" cx="60" cy="60" r="52" pathLength="100"/>
    </svg>
    <span class="ring-label">40%</span>
  </div>
  <div class="ring-buttons">
    <button type="button" data-change="-10">− 10%</button>
    <button type="button" data-change="10">+ 10%</button>
  </div>
</div>

.ring-demo { display: grid; justify-items: center; gap: 16px; }
.ring { position: relative; width: 150px; height: 150px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } /* start at 12 o'clock */

.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--surface-2); }

/* pathLength="100" makes the circle's length 100 units, so the dash maths is just
   the percentage: show `--progress` units of stroke, then a gap for the rest. */
.ring-fill {
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-dasharray: var(--progress) 100;
  transition: stroke-dasharray 0.5s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s;
}
.ring.is-complete .ring-fill { stroke: #12a150; }

.ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 28px system-ui, sans-serif;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ring-buttons { display: flex; gap: 8px; }
.ring-buttons button {
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 13px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface-2);
}
@media (prefers-reduced-motion: reduce) { .ring-fill { transition-duration: 0.2s; } }

// Progress ring: one number drives everything. setProgress() updates the CSS
// variable (the ring), the label, and the ARIA value for screen readers.

const ring = document.querySelector('.ring');
const label = ring.querySelector('.ring-label');
let progress = 40;

function setProgress(value) {
  progress = Math.max(0, Math.min(100, value));
  ring.style.setProperty('--progress', progress);
  ring.setAttribute('aria-valuenow', progress);
  ring.classList.toggle('is-complete', progress === 100);
  label.textContent = `${progress}%`;
}

document.querySelectorAll('[data-change]').forEach((button) => {
  button.addEventListener('click', () => setProgress(progress + Number(button.dataset.change)));
});