Bar Timer

<div class="nuda-bar-timer" role="timer" aria-label="Timer">
  <div class="nuda-bar-timer__header">
    <span class="nuda-bar-timer__label">Time remaining</span>
    <span class="nuda-bar-timer__value">1:00</span>
  </div>
  <div class="nuda-bar-timer__track">
    <div class="nuda-bar-timer__fill"></div>
  </div>
</div>

/* Bar Timer
   Horizontal bar countdown that depletes over time.
   Customize: --bar-color, --bar-track, --bar-duration */

.nuda-bar-timer {
  --bar-color: #e4ff54;
  --bar-track: rgba(255, 255, 255, 0.08);
  --bar-duration: 60s;
  width: 100%;
}

.nuda-bar-timer__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.nuda-bar-timer__label {
  color: #999;
  font-size: 0.75rem;
}

.nuda-bar-timer__value {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nuda-bar-timer__track {
  width: 100%;
  height: 4px;
  background: var(--bar-track);
  border-radius: 4px;
  overflow: hidden;
}

.nuda-bar-timer__fill {
  height: 100%;
  background: var(--bar-color);
  border-radius: 4px;
  width: 100%;
  animation: nuda-bar-countdown var(--bar-duration) linear forwards;
}

@keyframes nuda-bar-countdown {
  from { width: 100%; }
  to   { width: 0%; }
}

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

/* Bar Timer — Updates the time label as the bar depletes. */

(function () {
  var timer = document.querySelector('.nuda-bar-timer');
  if (!timer) return;

  var valueEl = timer.querySelector('.nuda-bar-timer__value');
  if (!valueEl) return;

  var duration = 60; // seconds
  var remaining = duration;

  function formatTime(s) {
    var m = Math.floor(s / 60);
    var sec = s % 60;
    return m + ':' + (sec < 10 ? '0' : '') + sec;
  }

  valueEl.textContent = formatTime(remaining);

  var interval = setInterval(function () {
    remaining--;
    valueEl.textContent = formatTime(Math.max(0, remaining));
    if (remaining <= 0) clearInterval(interval);
  }, 1000);
})();