Component Deep Dive #8: Step Indicator — Users Need to See the Finish Line

#css #frontend #ux #webdev

This component is from Web Component Dictionary v2.0 — 83 components, bilingual, live preview, zero dependencies.

When users fill a multi-page form without knowing how many steps remain, 30% abandon halfway. A step indicator shows "You're on step 2 of 3 — almost done."

Three States

Each step has three states:

Completed: green background + checkmark
Current: highlighted + number + glow shadow
Inactive: gray + number

The connecting lines must sync: lines between completed steps turn green, lines after current stay gray.

CSS Key Parts

.step.completed .step-circle { background: #2ed573; color: #fff; }
.step.current .step-circle {
  background: #e94560; color: #fff;
  box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.2);
}
.step-line.active { background: #2ed573; }

JavaScript State Update

function updateSteps(currentStep, totalSteps) {
  steps.forEach((step, index) => {
    step.classList.remove('completed', 'current');
    if (index < currentStep - 1) step.classList.add('completed');
    else if (index === currentStep - 1) step.classList.add('current');
  });
  lines.forEach((line, index) => {
    line.classList.toggle('active', index < currentStep - 1);
  });
}

Common Pitfalls

Too many steps: Collapse completed steps beyond 5
Click-to-go-back: Completed steps need cursor: pointer — inactive ones don't
Validation sync: Don't advance the indicator until current step validation passes