How to create a Steps Progress Bar
Tags: css, javascript, webdev, programming
Published: 2023-01-05 13:52:44

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.

```html
<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.

```css
* {
    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.

```javascript

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wohvff1k4gi2z07db156.png)