Urgency Pulse Timer

<div class="nuda-cd2-urgency" role="timer" aria-label="Urgency pulse timer">
  <div class="nuda-cd2-urgency__ring">
    <span class="nuda-cd2-urgency__pulse"></span>
  </div>
  <div class="nuda-cd2-urgency__body">
    <span class="nuda-cd2-urgency__headline">Flash sale ending!</span>
    <span class="nuda-cd2-urgency__time">00:09</span>
  </div>
  <div class="nuda-cd2-urgency__bar">
    <div class="nuda-cd2-urgency__fill"></div>
  </div>
</div>

.nuda-cd2-urgency {
  background: #1a1a1a;
  border: 1px solid rgba(255,107,107,.25);
  border-radius: 12px;
  padding: .75rem 1rem;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

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

.nuda-cd2-urgency__pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255,107,107,.6);
  animation: _nuda-cd2urgpulse 1s ease-out infinite;
}

.nuda-cd2-urgency__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nuda-cd2-urgency__headline {
  color: #cfcfcf;
  font-size: .75rem;
  font-weight: 500;
}

.nuda-cd2-urgency__time {
  color: #ff6b6b;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: monospace;
}

.nuda-cd2-urgency__bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}

.nuda-cd2-urgency__fill {
  height: 100%;
  width: 15%;
  background: linear-gradient(90deg,#ff6b6b,#ff9a5c);
  border-radius: 3px;
  animation: _nuda-cd2urgbar 9s linear forwards;
}

@keyframes _nuda-cd2urgpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255,107,107,.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255,107,107,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,107,107,0);
  }
}

@keyframes _nuda-cd2urgbar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

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