Code a responsive step progress bar with HTML, CSS, & JavaScript

In this tutorial we’ll be creating a responsive step progress bar. These are commonly used when a large form is split into several steps. They let the user know how much of a form they have completed and how many step remain.

Here’s what the completed progress bar will look like:

Let’s get started by creating the required HTML markup:

<div id="progress">
  <div id="progress-bar"></div>
  <ul id="progress-num">
    <li class="step active">1</li>
    <li class="step">2</li>
    <li class="step">3</li>
    <li class="step">4</li>
  </ul>
</div>Code language: HTML, XML (xml)

You can easily add more steps here by including extra <li> elements as required. As we’re building the progress bar in such a way it will remain responsive and functional. We’ll also need some buttons to control the progress through the steps as follows:

<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>Code language: HTML, XML (xml)

Now for the JavaScript starting with variables for the various elements:

const progressBar = document.getElementById("progress-bar");
const progressNext = document.getElementById("progress-next");
const progressPrev = document.getElementById("progress-prev");
const steps = document.querySelectorAll(".step");
let active = 1;Code language: JavaScript (javascript)

To navigate through the steps we’ll add an eventListener to detect clicks on each of the buttons:

progressNext.addEventListener("click", () => {
  active++;
  if (active > steps.length) {
    active = steps.length;
  }
  updateProgress();
});

progressPrev.addEventListener("click", () => {
  active--;
  if (active < 1) {
    active = 1;
  }
  updateProgress();
});Code language: JavaScript (javascript)

When the eventListener is triggered it increases or decreases the active count based on which button was clicked. It also prevents the active count from going higher or lower than the number of steps. We’re also calling a updateProgress function which looks like this:

const updateProgress = () => {
  // toggle active class on list items
  steps.forEach((step, i) => {
    if (i < active) {
      step.classList.add("active");
    } else {
      step.classList.remove("active");
    }
  });
  // set progress bar width  
  progressBar.style.width = 
    ((active - 1) / (steps.length - 1)) * 100 + "%";
  // enable disable prev and next buttons
  if (active === 1) {
    progressPrev.disabled = true;
  } else if (active === steps.length) {
    progressNext.disabled = true;
  } else {
    progressPrev.disabled = false;
    progressNext.disabled = false;
  }
};Code language: JavaScript (javascript)

This does 3 things:

• Loops through each of the steps and toggles the active class.
• Set’s the progress bar width as a percentage based on the active and total steps.
• Disables the appropriate button when the active step is either the first or last step.

Now we just need to add some CSS to see the progress bar in action:

#progress {
  position: relative;
  margin-bottom: 30px;   
}Code language: CSS (css)

Relative positioning so we can use absolute position on the children elements.

#progress-bar {
  position: absolute;
  background: lightseagreen;
  height: 5px;
  width: 0%;
  top: 50%;
  left: 0;
}Code language: CSS (css)

This sets the base styles for the the progress bar, we toggle it’s width via JavaScript.

#progress-num {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}Code language: CSS (css)

Flex layout to evenly distribute the numbers within the parent <div> no matter the width.

#progress-num::before {
  content: "";
  background-color: lightgray;
  position: absolute;
  top: 50%;
  left: 0;
  height: 5px;
  width: 100%;
  z-index: -1;
}Code language: CSS (css)

CSS pseudo-element that represents the inactive portion of the progress bar.

#progress-num .step {
  border: 3px solid lightgray;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;    
  position: relative;
  z-index: 1;
}Code language: CSS (css)

Styles each of the inactive steps inside a circle.

#progress-num .step.active {
  border-color: lightseagreen;
  background-color: lightseagreen;
  color: #fff;
}Code language: CSS (css)

Styles the active steps border and background color to match the progress bar.

That’s all for this tutorial, you should now have a working responsive step progress bar that you can can easily be customised to suit your individual requirements. As always you can find the full working source code used in this tutorial on Github.