Circular Progress

<!-- Circular Progress
     To set percentage: stroke-dashoffset = circumference - (circumference * percent / 100)
     Circumference for r=24: 2 * π * 24 ≈ 150.8
     72% → 150.8 - (150.8 * 0.72) ≈ 42.2 -->
<div class="nuda-circular-progress" role="progressbar"
     aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"
     aria-label="72% complete">
  <svg viewBox="0 0 60 60" width="56" height="56">
    <circle class="nuda-circular-progress__track"
      cx="30" cy="30" r="24" fill="none" stroke-width="5" />
    <circle class="nuda-circular-progress__fill"
      cx="30" cy="30" r="24" fill="none" stroke-width="5"
      stroke-linecap="round"
      stroke-dasharray="150.8"
      stroke-dashoffset="42.2" />
  </svg>
  <span class="nuda-circular-progress__label">72%</span>
</div>

/* Circular Progress
   SVG circle filling as a percentage.
   Customize: --circ-color, --circ-track, --circ-stroke-width */

.nuda-circular-progress {
  --circ-color: #818cf8;
  --circ-track: rgba(255, 255, 255, 0.1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nuda-circular-progress__track {
  stroke: var(--circ-track);
}

.nuda-circular-progress__fill {
  stroke: var(--circ-color);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.5s ease;
}

.nuda-circular-progress__label {
  position: absolute;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-circular-progress__fill {
    transition: none;
  }
}