Upload Progress Ring

<div class="nuda-av2-upload" role="img" aria-label="Uploading photo, 68 percent complete">
  <svg class="nuda-av2-upload__ring" viewBox="0 0 60 60" aria-hidden="true">
    <circle class="nuda-av2-upload__track" cx="30" cy="30" r="26" />
    <circle class="nuda-av2-upload__bar" cx="30" cy="30" r="26" />
  </svg>
  <span class="nuda-av2-upload__avatar" style="background:linear-gradient(135deg,#62b6ff,#34d399)">JS</span>
  <span class="nuda-av2-upload__pct" aria-hidden="true">68%</span>
</div>

.nuda-av2-upload {
  position: relative;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nuda-av2-upload__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.nuda-av2-upload__track {
  fill: none;
  stroke: rgba(255,255,255,.1);
  stroke-width: 3;
}

.nuda-av2-upload__bar {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 163;
  stroke-dashoffset: 163;
  animation: _nuda-av2uploadsweep 2.4s ease-out infinite;
}

.nuda-av2-upload__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 13px;
}

.nuda-av2-upload__pct {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
}

@keyframes _nuda-av2uploadsweep {
  0% {
    stroke-dashoffset: 163;
  }
  60% {
    stroke-dashoffset: 52;
  }
  100% {
    stroke-dashoffset: 52;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-av2-upload__bar {
    animation: none;
    stroke-dashoffset: 52;
  }
}