Circular Progress Stepper

<div class="nuda-st2-ring-count" role="status" aria-live="polite">
  <svg viewBox="0 0 64 64" aria-hidden="true">
    <circle class="nuda-st2-ring-count__track" cx="32" cy="32" r="27" />
    <circle class="nuda-st2-ring-count__fill" cx="32" cy="32" r="27" />
  </svg>
  <div class="nuda-st2-ring-count__label">
    <strong>3</strong>
    <span>of 5</span>
  </div>
</div>

.nuda-st2-ring-count {
  position: relative;
  width: 88px;
  height: 88px;
}

.nuda-st2-ring-count svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.nuda-st2-ring-count__track {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 5;
}

.nuda-st2-ring-count__fill {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 169.6;
  stroke-dashoffset: 169.6;
  animation: _nuda-st2ringcount-fill 1s cubic-bezier(.16,1,.3,1) .1s forwards;
}

.nuda-st2-ring-count__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.nuda-st2-ring-count__label strong {
  color: #fafafa;
  font-size: 20px;
  font-weight: 700;
}

.nuda-st2-ring-count__label span {
  color: #777;
  font-size: 10px;
}

@keyframes _nuda-st2ringcount-fill {
  to {
    stroke-dashoffset: 67.84;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-st2-ring-count__fill {
    animation: none;
    stroke-dashoffset: 67.84;
  }
}