Progress Ring Metric

<div class="nuda-kpi-ring">
  <svg class="nuda-kpi-ring__svg" viewBox="0 0 80 80">
    <circle class="nuda-kpi-ring__track" cx="40" cy="40" r="34"></circle>
    <circle class="nuda-kpi-ring__fill" cx="40" cy="40" r="34"></circle>
  </svg>
  <div class="nuda-kpi-ring__center">
    <span class="nuda-kpi-ring__pct">73%</span>
    <span class="nuda-kpi-ring__sub">of goal</span>
  </div>
  <div class="nuda-kpi-ring__label">Q4 Target</div>
</div>

.nuda-kpi-ring {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 160px;
  position: relative;
}

.nuda-kpi-ring__svg {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
}

.nuda-kpi-ring__track {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 7;
}

.nuda-kpi-ring__fill {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 57.7;
  animation: _nuda-kpiRingDraw .9s ease-out;
}

.nuda-kpi-ring__center {
  position: absolute;
  top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: 90px;
}

.nuda-kpi-ring__pct {
  color: #fafafa;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.nuda-kpi-ring__sub {
  color: #555;
  font-size: .65rem;
}

.nuda-kpi-ring__label {
  color: #777;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@keyframes _nuda-kpiRingDraw {
  from {
    stroke-dashoffset: 213.6;
  }
  to {
    stroke-dashoffset: 57.7;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-kpi-ring__fill {
    animation: none;
  }
}