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

Overview

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

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.

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');
        }
      });
    });
  });
});

              