How to create a Multi Step Progress Bar in HTML CSS and JavaScript?

Last Updated : 30 Jul, 2024

In this article, we will create a multi-step progress bar. A Multi-Step Progress Bar is a user interface element created with HTML, CSS, and JavaScript. It guides users through a series of steps or stages, visually displaying their progress and allowing step-by-step navigation in a multi-step process or form.

Final output

prog-1

Prerequisite

Approach

Create a multi-step form structure with HTML and style it using CSS.
Use JavaScript to handle step transitions, progress tracking, and button interactions.
Add event listeners to the "Next" and "Previous" buttons for step navigation.
Update the progress bar width and active step indicator as users navigate.
Toggle the visibility of fieldsets to show the current step and hide others.
Implement a "Finish" step to indicate completion of the multi-step process.

Example: This example illustrates the creation of a basic Multi Step Progress Bar using HTML, CSS, & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
          Custom Multi-Step Progress Bar
      </title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <div class="container">
        <div class="progress-container">
            <ul id="progressbar">
                <li class="active" 
                    id="step1">
                    <strong>Step 1</strong>
                </li>
                <li id="step2">
                      <strong>Step 2</strong>
                  </li>
                <li id="step3">
                      <strong>Step 3</strong>
                  </li>
                <li id="step4">
                      <strong>Step 4</strong>
                  </li>
            </ul>
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
        </div>
        <div class="step-container">
            <fieldset>
                <h2>Welcome To GFG Step 1</h2>
                <input type="button"
                       name="next-step"
                       class="next-step"
                       value="Next Step" />
            </fieldset>
            <fieldset>
                <h2>Welcome To GFG Step 2</h2>
                <input type="button"
                       name="next-step" 
                       class="next-step" 
                       value="Next Step" />
                <input type="button"
                       name="previous-step" 
                       class="previous-step" 
                       value="Previous Step" />
            </fieldset>
            <fieldset>
                <h2>Welcome To GFG Step 3</h2>
                <input type="button" 
                       name="next-step" 
                       class="next-step" 
                       value="Final Step" />
                <input type="button" 
                       name="previous-step" 
                       class="previous-step" 
                       value="Previous Step" />
            </fieldset>
            <fieldset>
                <div class="finish">
                    <h2 class="text">
                        <strong>FINISHED</strong>
                    </h2>
                </div>
                <input type="button" 
                       name="previous-step" 
                       class="previous-step"
                       value="Previous Step" />
            </fieldset>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

.container {
    margin: 20px auto;
}

.progress-container {
    text-align: center;
    margin-bottom: 30px;
}

#progressbar {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    color: lightgrey;
}

#progressbar li {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    position: relative;
}

#progressbar li.active {
    color: #2F8D46;
}

.progress {
    height: 20px;
    background-color: lightgray;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    background-color: #2F8D46;
    width: 0;
    height: 100%;
    transition: width 0.4s ease-in-out;
}

.step-container fieldset {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
    display: none;
}

.step-container fieldset:first-of-type {
    display: block;
}

h2 {
    color: #2F8D46;
    margin-top: 10px;
    text-align: center;
}

.next-step,
.previous-step {
    width: 100px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

.next-step {
    background: #2F8D46;
}

.previous-step {
    background: #616161;
}

.next-step:hover,
.next-step:focus {
    background-color: #1e6f3e;
}

.previous-step:hover,
.previous-step:focus {
    background-color: #4d4d4d;
}

.text {
    color: #2F8D46;
    font-weight: normal;
}

.finish {
    text-align: center;
}

JavaScript

// script.js
document.addEventListener("DOMContentLoaded", function () {
    const progressListItems = 
        document.querySelectorAll("#progressbar li");
    const progressBar =
        document.querySelector(".progress-bar");
    let currentStep = 0;

    function updateProgress() {
        const percent = 
            (currentStep / (progressListItems.length - 1)) * 100;
        progressBar.style.width = percent + "%";

        progressListItems.forEach((item, index) => {
            if (index === currentStep) {
                item.classList.add("active");
            } else {
                item.classList.remove("active");
            }
        });
    }

    function showStep(stepIndex) {
        const steps =
            document.querySelectorAll(".step-container fieldset");
        steps.forEach((step, index) => {
            if (index === stepIndex) {
                step.style.display = "block";
            } else {
                step.style.display = "none";
            }
        });
    }

    function nextStep() {
        if (currentStep < progressListItems.length - 1) {
            currentStep++;
            showStep(currentStep);
            updateProgress();
        }
    }

    function prevStep() {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
            updateProgress();
        }
    }

    const nextStepButtons = 
        document.querySelectorAll(".next-step");
    const prevStepButtons = 
        document.querySelectorAll(".previous-step");

    nextStepButtons.forEach((button) => {
        button.addEventListener("click", nextStep);
    });

    prevStepButtons.forEach((button) => {
        button.addEventListener("click", prevStep);
    });
});