Shopping Cart Expiration Timers — Live CSS Playground

{CF} CodeFronts Back to CSS Countdown Timers Shopping Cart Expiration Timers CSS + JS

HTML

<section class="cdt-crt" aria-label="Cart expiration countdown timer demo">
  <div class="cdt-crt__cart">
    <div class="cdt-crt__reserve">
      <span class="cdt-crt__lock" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 1 1 6 0v3H9z"/></svg>
      </span>
      <div class="cdt-crt__reserve-text">
        <p>Your cart is reserved for</p>
        <div class="cdt-crt__clock" role="timer" aria-live="polite" aria-atomic="true">
          <span data-cdt-crt="m">04</span><span class="cdt-crt__colon" aria-hidden="true">:</span><span data-cdt-crt="s">59</span>
        </div>
      </div>
    </div>
    <div class="cdt-crt__bar-track"><div class="cdt-crt__bar-fill" data-cdt-crt="bar"></div></div>

    <div class="cdt-crt__items">
      <div class="cdt-crt__row">
        <div class="cdt-crt__thumb cdt-crt__t1" aria-hidden="true">🎧</div>
        <div class="cdt-crt__meta"><h3>Studio Wireless Headphones</h3><span>Matte Black · Qty 1</span></div>
        <div class="cdt-crt__price">$129</div>
      </div>
      <div class="cdt-crt__row">
        <div class="cdt-crt__thumb cdt-crt__t2" aria-hidden="true">⌚</div>
        <div class="cdt-crt__meta"><h3>Pulse Fitness Watch</h3><span>Slate · Qty 1</span></div>
        <div class="cdt-crt__price">$89</div>
      </div>
    </div>

    <div class="cdt-crt__summary">
      <div class="cdt-crt__line"><span>Subtotal</span><span>$218.00</span></div>
      <div class="cdt-crt__line"><span>Shipping</span><span>Free</span></div>
      <div class="cdt-crt__total"><span>Total</span><span>$218.00</span></div>
      <button class="cdt-crt__checkout" type="button">Complete Checkout</button>
      <p class="cdt-crt__reassure">⚡ Hurry — items release back to stock when the timer ends</p>
    </div>
  </div>
</section>

CSS

/* ─── 03 Cart Expiration Timer — reservation hold UX ───────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Roboto+Mono:wght@600&display=swap');

.cdt-crt {
  --cdt-crt-bg: #faf7f2;
  --cdt-crt-card: #ffffff;
  --cdt-crt-ink: #211c1a;
  --cdt-crt-muted: #8a807a;
  --cdt-crt-alert: #e8552d;
  --cdt-crt-alert-soft: #fef0eb;
  --cdt-crt-line: #efe9e1;

  position: relative;
  width: 100%;
  min-height: 520px;
  background: var(--cdt-crt-bg);
  background-image: radial-gradient(circle at 90% 0%, rgba(232,85,45,0.05), transparent 40%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 18px;
  color: var(--cdt-crt-ink);
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-crt *, .cdt-crt *::before, .cdt-crt *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-crt__cart {
  background: var(--cdt-crt-card);
  width: 100%; max-width: 420px;
  border-radius: 20px;
  border: 1px solid var(--cdt-crt-line);
  box-shadow: 0 30px 60px -28px rgba(33,28,26,0.3);
  overflow: hidden;
}
.cdt-crt__reserve {
  background: var(--cdt-crt-alert-soft);
  border-bottom: 1px solid #f6ddd4;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 13px;
}
.cdt-crt__lock {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--cdt-crt-alert);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(232,85,45,0.6);
}
.cdt-crt__lock svg { width: 16px; height: 16px; fill: #fff; }
.cdt-crt__reserve-text { flex: 1; }
.cdt-crt__reserve-text p { font-size: 12.5px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__clock {
  font-family: 'Roboto Mono', monospace;
  font-size: 22px; font-weight: 600;
  color: var(--cdt-crt-alert); letter-spacing: 1px;
  margin-top: 1px;
}
.cdt-crt__colon { animation: cdt-crt-blink 1s steps(1) infinite; }
@keyframes cdt-crt-blink { 50% { opacity: 0; } }

.cdt-crt__bar-track { height: 4px; background: #f3e7e1; }
.cdt-crt__bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cdt-crt-alert), #f6915f);
  transition: width 1s linear, background 0.3s;
}

.cdt-crt__items { padding: 8px 22px 4px; }
.cdt-crt__row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--cdt-crt-line);
}
.cdt-crt__row:last-child { border-bottom: none; }
.cdt-crt__thumb {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.cdt-crt__t1 { background: #eaf2ff; }
.cdt-crt__t2 { background: #fff1e8; }
.cdt-crt__meta { flex: 1; }
.cdt-crt__meta h3 { font-size: 14px; font-weight: 700; }
.cdt-crt__meta span { font-size: 12px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__price { font-weight: 800; font-size: 15px; }

.cdt-crt__summary { padding: 18px 22px 22px; background: #fdfbf8; border-top: 1px solid var(--cdt-crt-line); }
.cdt-crt__line {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--cdt-crt-muted); font-weight: 600; margin-bottom: 8px;
}
.cdt-crt__total {
  display: flex; justify-content: space-between;
  font-size: 18px; font-weight: 800; margin: 12px 0 18px;
}
.cdt-crt__checkout {
  width: 100%; border: none;
  background: var(--cdt-crt-ink); color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 15px;
  padding: 16px; border-radius: 14px; cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.cdt-crt__checkout:hover { background: var(--cdt-crt-alert); transform: translateY(-2px); }
.cdt-crt__checkout:focus-visible { outline: 2px solid var(--cdt-crt-alert); outline-offset: 3px; }
.cdt-crt__reassure { text-align: center; font-size: 11px; color: var(--cdt-crt-muted); margin-top: 12px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cdt-crt__colon, .cdt-crt__bar-fill, .cdt-crt__checkout { animation: none; transition: none; }
}

(() => {
  const root = document.querySelector('.cdt-crt');
  if (!root) return;
  const DURATION = 5 * 60;
  let remaining = 4 * 60 + 59;
  const pad = (n) => String(n).padStart(2, '0');
  const mEl  = root.querySelector('[data-cdt-crt="m"]');
  const sEl  = root.querySelector('[data-cdt-crt="s"]');
  const bar  = root.querySelector('[data-cdt-crt="bar"]');
  function tick() {
    mEl.textContent = pad(Math.floor(remaining / 60));
    sEl.textContent = pad(remaining % 60);
    bar.style.width = (remaining / DURATION * 100) + '%';
    if (remaining <= 30) bar.style.background = '#c0392b';
    if (remaining > 0) remaining--;
  }
  tick();
  setInterval(tick, 1000);
})();