Category · Progress Indicators Difficulty Level · Intermediate Published on · August 18, 2025

Stepper Progress Tracker

A visual stepper component to guide users through a multi-step process.

#stepper #progress #tracker #form #multi-step

Responsive Design

Yes

Dark Mode Support

lines

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

200px

HTML

lines

CSS

lines

JavaScript

lines

                <div class="stepper-container">
  <div class="step active">
    <div class="step-icon">1</div>
    <div class="step-label">Step 1</div>
  </div>
  <div class="step-line"></div>
  <div class="step">
    <div class="step-icon">2</div>
    <div class="step-label">Step 2</div>
  </div>
  <div class="step-line"></div>
  <div class="step">
    <div class="step-icon">3</div>
    <div class="step-label">Step 3</div>
  </div>
</div>

              

                .stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin: auto;
}

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

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: background-color 0.3s;
}

.step.active .step-icon {
  background-color: #3498db;
}

.step-label {
  margin-top: 10px;
  font-size: 14px;
}

.step-line {
  flex-grow: 1;
  height: 2px;
  background-color: #ccc;
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const steps = document.querySelectorAll('.step');
  steps.forEach((step, index) => {
    step.addEventListener('click', () => {
      steps.forEach((s, i) => {
        if (i <= index) {
          s.classList.add('active');
        } else {
          s.classList.remove('active');
        }
      });
    });
  });
});

              