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

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);
    });
});

Output:

progess-bar-3

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

P

parzival_op

Improve

Article Tags :

Similar Reads

Create a File Upload with Progress Bar in HTML CSS & JavaScript

In a file upload with a progress bar application using HTML, CSS, and JavaScript where users can be able to upload the image file, with a live dynamic progress bar of uploading. The uploaded image can be previewed in modal. Users can also clear the uploaded image in the application. PreviewPrerequis

How to create a progress bar using HTML and CSS?

The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can useÂ HTMLÂ andÂ CSS. To make that progress bar responsive you will needÂ JavaScript.In this article, we will learn to create progr

Create a Multi Step Form in Bootstrap 5 & JavaScript

Forms are the gateway for interaction between users and web services. As the complexity of data collection increases, so does the need for more user-friendly form interfaces. A multi-step form, by breaking down the data collection process into manageable chunks, enhances user experience and improves

How to Create Scroll Indicator using HTML CSS and JavaScript ?

Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo

How to Set Color of Progress Bar using HTML and CSS ?

The progress bar is an important element on the web, the progress bar can be used for downloading, marks obtained, skill measuring units, etc. To create a progress bar we can use HTML and CSS.Â The progress bar is used to represent the progress of a task. It also defines how much work is done and ho

How to create a progress bar animation using HTML and CSS ?

In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi

How to create progress bar in React JS ?

A progress bar shows the measure of progress of any task or activity. It is the graphical representation of progression. Material UI for React has this component available for us and is very easy to integrate. We can Create a straightforward Progress Bar in React JS using the following approach.Prer

How to create multi step progress bar using Bootstrap ?

In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen

Creating Progress Bar using JavaScript

A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words, we can say that Progress Bars can be used to depict the status of anything that is in progress. There are several approaches

Create a Circular Progress Bar using HTML and CSS

A circular progress bar is a visual representation that shows the progress of a task or operation in a circular form. It's a straightforward and useful way to represent progress and can enhance the appearance of your application or website. So, we will design a circular progress bar using HTML and C