Countdown Timer — Free HTML CSS JS Pomodoro Snippet

<div class="wrap">
  <div class="timer-card">
    <div class="ring-wrap">
      <svg class="ring-svg" viewBox="0 0 120 120">
        <circle class="ring-bg"   cx="60" cy="60" r="52"/>
        <circle class="ring-fill" cx="60" cy="60" r="52" id="ring"/>
      </svg>
      <div class="ring-inner">
        <div class="time-num" id="time-num">25:00</div>
        <div class="time-lbl" id="time-lbl">Focus</div>
      </div>
    </div>

    <div class="mode-tabs">
      <button class="mode active" onclick="setMode('focus',25)" id="btn-focus">Focus</button>
      <button class="mode" onclick="setMode('break',5)"  id="btn-break">Short break</button>
      <button class="mode" onclick="setMode('long',15)"  id="btn-long">Long break</button>
    </div>

    <div class="controls">
      <button class="ctrl-btn" id="main-btn" onclick="toggle()">Start</button>
      <button class="ctrl-btn secondary" onclick="reset()">Reset</button>
    </div>

    <div class="session-row">
      Session <strong id="session-num">1</strong> of 4
      <div class="dots" id="dots">
        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.wrap { width: 100%; max-width: 320px; }
.timer-card { background: #fff; border-radius: 24px; padding: 32px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; gap: 24px; }

.ring-wrap { position: relative; width: 160px; height: 160px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: #f1f5f9; stroke-width: 8; }
.ring-fill { fill: none; stroke: #6366f1; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s linear, stroke 0.3s; }
.ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.time-num { font-size: 32px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1; }
.time-lbl { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.8px; }

.mode-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 10px; padding: 3px; }
.mode { background: transparent; border: none; font-size: 12px; font-weight: 600; color: #64748b; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.mode.active { background: #fff; color: #6366f1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

.controls { display: flex; gap: 10px; width: 100%; }
.ctrl-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.ctrl-btn:not(.secondary) { background: #6366f1; color: #fff; }
.ctrl-btn:not(.secondary):hover { background: #4f46e5; }
.ctrl-btn.secondary { background: #f1f5f9; color: #475569; }
.ctrl-btn.secondary:hover { background: #e2e8f0; }

.session-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; }
.dots { display: flex; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; transition: background 0.3s; }
.dot.done { background: #6366f1; }

const C = 2 * Math.PI * 52; // circumference
const modes = { focus:25, break:5, long:15 };
let currentMode = 'focus';
let totalSecs = 25 * 60;
let remaining = totalSecs;
let running = false;
let session = 1;
let ticker = null;

function setMode(mode, mins) {
  clearInterval(ticker);
  running = false;
  currentMode = mode;
  totalSecs = mins * 60;
  remaining = totalSecs;
  document.querySelectorAll('.mode').forEach(b => b.classList.remove('active'));
  document.getElementById('btn-' + mode).classList.add('active');
  document.getElementById('time-lbl').textContent = mode === 'focus' ? 'Focus' : mode === 'break' ? 'Short break' : 'Long break';
  document.getElementById('main-btn').textContent = 'Start';
  document.getElementById('ring').style.stroke = mode === 'focus' ? '#6366f1' : mode === 'break' ? '#10b981' : '#0ea5e9';
  render();
}

function toggle() {
  if (running) {
    clearInterval(ticker);
    running = false;
    document.getElementById('main-btn').textContent = 'Resume';
  } else {
    running = true;
    document.getElementById('main-btn').textContent = 'Pause';
    ticker = setInterval(() => {
      if (remaining <= 0) {
        clearInterval(ticker);
        running = false;
        document.getElementById('main-btn').textContent = 'Start';
        if (currentMode === 'focus') {
          session = Math.min(4, session + 1);
          document.getElementById('session-num').textContent = session;
          updateDots();
        }
        return;
      }
      remaining--;
      render();
    }, 1000);
  }
}

function reset() {
  clearInterval(ticker);
  running = false;
  remaining = totalSecs;
  document.getElementById('main-btn').textContent = 'Start';
  render();
}

function render() {
  const m = Math.floor(remaining / 60);
  const s = remaining % 60;
  document.getElementById('time-num').textContent = String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
  const pct = remaining / totalSecs;
  document.getElementById('ring').style.strokeDashoffset = C * (1 - pct);
}

function updateDots() {
  document.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('done', i < session - 1));
}

render();