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 the form they have completed and how much remains.
Here’s what the completed progress bar will look like:
Let’s get started by creating the 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>
You can easily add more steps here if required and the progress bar 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>
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;
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();
});
This increases or decreases the active count based on the button 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;
}
};
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;
}
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;
}
This sets the base styles for the the progress bar, we toggle it’s width in the JavaScript.
#progress-num {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
This evenly distributes 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;
}
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;
}
Styles each inactive steps inside a circle.
#progress-num .step.active {
border-color: lightseagreen;
background-color: lightseagreen;
color: #fff;
}
Styles 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 can be customised to suit your needs. As always you can find the full source code used in this tutorial on Github.
Top comments (0)