Gradient Sweep Ring

<div class="nuda-cd2-sweep" role="timer" aria-label="Gradient sweep ring countdown">
  <div class="nuda-cd2-sweep__outer">
    <div class="nuda-cd2-sweep__spinner"></div>
    <div class="nuda-cd2-sweep__inner">
      <span class="nuda-cd2-sweep__num">24</span>
      <span class="nuda-cd2-sweep__unit">min</span>
    </div>
  </div>
  <p class="nuda-cd2-sweep__caption">Est. delivery</p>
</div>

.nuda-cd2-sweep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.nuda-cd2-sweep__outer {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,#e4ff54 0%,#a8ff78 40%,rgba(255,255,255,.06) 60%);
  animation: _nuda-cd2sweep 3s linear infinite;
  flex-shrink: 0;
}

.nuda-cd2-sweep__spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,#e4ff54 0%,#a8ff78 40%,rgba(255,255,255,.06) 60%);
}

.nuda-cd2-sweep__inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.nuda-cd2-sweep__num {
  color: #fafafa;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-cd2-sweep__unit {
  color: #777;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.nuda-cd2-sweep__caption {
  color: #555;
  font-size: .68rem;
  letter-spacing: .06em;
  margin: 0;
}

@keyframes _nuda-cd2sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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