Progress Stepper — Free HTML CSS JS Wizard Snippet

<div class="stepper">
  <div class="step done">
    <div class="dot"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
    <div class="label">Account</div>
  </div>
  <div class="line done"></div>
  <div class="step active">
    <div class="dot">2</div>
    <div class="label">Profile</div>
  </div>
  <div class="line"></div>
  <div class="step">
    <div class="dot">3</div>
    <div class="label">Billing</div>
  </div>
  <div class="line"></div>
  <div class="step">
    <div class="dot">4</div>
    <div class="label">Done</div>
  </div>
</div>
<div class="actions">
  <button class="btn ghost" onclick="prevStep()">Back</button>
  <button class="btn solid" onclick="nextStep()">Continue</button>
</div>

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

.stepper { display: flex; align-items: center; }

.step { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #e2e8f0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #94a3b8;
  transition: all 0.2s;
}
.step.done .dot   { background: #6366f1; border-color: #6366f1; color: #fff; }
.step.active .dot { border-color: #6366f1; color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }

.label { font-size: 11px; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.step.done .label   { color: #6366f1; }
.step.active .label { color: #1e293b; }

.line { width: 60px; height: 2px; background: #e2e8f0; margin-bottom: 20px; transition: background 0.2s; }
.line.done { background: #6366f1; }

.actions { display: flex; gap: 10px; }
.btn { padding: 9px 22px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn.solid { background: #6366f1; color: #fff; border: none; }
.btn.solid:hover { background: #4f46e5; }
.btn.ghost { background: none; color: #475569; border: 1.5px solid #e2e8f0; }
.btn.ghost:hover { border-color: #94a3b8; color: #1e293b; }

function getSteps() { return [...document.querySelectorAll('.step')]; }
function getLines() { return [...document.querySelectorAll('.line')]; }
function activeIndex() { return getSteps().findIndex(s => s.classList.contains('active')); }

function nextStep() {
  const steps = getSteps(), lines = getLines(), i = activeIndex();
  if (i >= steps.length - 1) return;
  steps[i].classList.remove('active'); steps[i].classList.add('done');
  lines[i].classList.add('done');
  steps[i+1].classList.add('active');
}
function prevStep() {
  const steps = getSteps(), lines = getLines(), i = activeIndex();
  if (i <= 0) return;
  steps[i].classList.remove('active');
  lines[i-1].classList.remove('done');
  steps[i-1].classList.remove('done'); steps[i-1].classList.add('active');
}