How to create a Steps Progress Bar

Recently, I had to facilitate the work of the users of a web page that I am maintaining. The best way to make the process as simple as possible was to create a Steps Progress Bar.

A multi-step progress bar is a powerful tool, used to show your customers the progress of work in a step format. It is very useful because it lets users know how close they are to a completed action.

To create a basic Progress Bar, you need to use Html, CSS and JavaScript.

Let's start with Html. The following format requires the use of Font Awesome.

<div class="main">

    <ul>
        <li>
            <i class="icons awesome fa-solid fa-user"></i>
            <div class="step first">
                <p>1</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Profile</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-coins"></i>
            <div class="step second">
                <p>2</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Finances</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-house"></i>
            <div class="step third">
                <p>3</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Property</p>
        </li>
        <li>
            <i class="icons awesome fa-regular fa-star-half-stroke"></i>
            <div class="step fourth">
                <p>4</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Evaluation</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-thumbs-up"></i>
            <div class="step fifth">
                <p>5</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Approval</p>
        </li>
    </ul>
</div>

Below is the code for styling the elements. The code includes CSS for active and inactive buttons.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

ul {
    display: flex;
}

ul li {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
}

ul li .icons {
    font-size: 25px;
    color: #1b761b;
    margin: 0 60px;
}

ul li .label {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    color: #1b761b;
}

ul li .step {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #d7d7c3;
    margin: 16px 0 10px;
    display: grid;
    place-items: center;
    color: ghostwhite;
    position: relative;
    cursor: pointer;
}

.step::after {
    content: "";
    position: absolute;
    width: 197px;
    height: 3px;
    background-color: #d7d7c3;
    right: 30px;
}

.first::after {
    width: 0;
    height: 0;
}

ul li .step .awesome {
    display: none;
}

ul li .step p {
    font-size: 18px;
}

ul li .active {
    background-color: #1b761b;
}

li .active::after {
    background-color: #1b761b;

}

ul li .active p {
    display: none;
}

ul li .active .awesome {
    display: flex;
}

JavaScript code is required for product functionality. The following code explains how the steps are initially inactive, and then become active through clicks on each step and event listeners.

const first = document.querySelector(".first");
const second = document.querySelector(".second");
const third = document.querySelector(".third");
const fourth = document.querySelector(".fourth");
const fifth = document.querySelector(".fifth");
const steps = [first, second, third, fourth, fifth];

function nextStep(currentStep) {
    steps.forEach(step => step.classList.remove("active"));

    steps.forEach((step, index) => {
        if (index <= currentStep) {
            step.classList.add("active");
        } else {
            step.classList.remove("active");
        }
    });
}

steps.forEach((step, index) => {
    step.addEventListener("click", () => {
        nextStep(index);
    });
});

The final product would look like this: