How to Create a Progress Bar using JavaScript

JavaScript is a powerful language that allows web developers to create dynamic and interactive web pages. It can be used to add a wide range of features to a website, such as a form validation, animation, and more. One of the most useful features that JavaScript can be used for is creating a progress bar.

In this tutorial, we will walk you through the process of creating a progress bar using JavaScript. A progress bar is a graphical representation of the progress of a task, and can be used to give the user feedback on how long a task will take to complete. We will use JavaScript to update the progress bar as the task progresses, giving the user a visual indication of how far along the task is.

In the next section of the tutorial, we will provide you with the code to create a progress bar using JavaScript. We will explain how the code works, step by step, so that you can understand how to create a progress bar on your own. By the end of this tutorial, you will have the knowledge and skills to create a progress bar using JavaScript, and you will be able to add this feature to your own website. So let’s get started!

Creating a Progress Bar using JavaScript

To create a progress bar, we will start by defining the styling for the progress bar and the progress bar fill using HTML and CSS. Then, using JavaScript, we’ll update the progress bar with a new progress value. We’ll represent the progress value by adjusting the width of the progress bar fill based on user input.

Next, we will add an event listener to a button on the webpage, which will trigger the progress bar update at regular intervals until it reaches 100%. We’re excited to combine these technologies to create a visually appealing, functional, and responsive progress bar that enhances user experience.

Let’s begin creating our progress bar by dividing the process into three sub-segments: HTML, CSS, and JavaScript. First, we’ll start with the HTML section.

HTML

In the HTML section, we start building the progress bar by defining the basic structure. This includes creating a container for the progress bar and a button to update it. By setting up the correct HTML elements and classes, we create the foundation for the styling and functionality of the progress bar.

<h3>Progress Bar Using JavaScript</h3>

<!-- The button to update the progress bar -->
<button id="update-button">Update Progress</button>

<!-- The progress bar element -->
<div id="progress-bar"></div>

In the HTML part, we create the progress bar and a button to update it. The button has an ID of “update-button” and the progress bar has an ID of “progress-bar”. In the JS section, we’ll use these IDs to refer to the button and progress bar elements. When the button is clicked, the progress bar will start to fill up.

Now, let’s move ahead and define the CSS of the progress bar.

CSS

In the CSS part, we define the styling for the progress bar and the progress bar fill. We’ll use CSS properties like background-color, border-radius, and width to define the style of the progress bar. We’ll also use the “:” before pseudo-element to create the progress bar fill, which will be updated by our JavaScript code.

#progress-bar {
    width: 100%;
    height: 15px;
    background-color: #f1f1f1;
    border-radius: 20px;
}

#progress-bar-fill {
    height: 100%;
    background-color: #ff0000;
    border-radius: 20px;
}

The CSS code above defines the style of the progress bar. The first CSS rule sets the width, height, background color, and border radius of the progress bar element itself. The second CSS rule sets the height, background color, and border radius of the progress bar fill element, which is what actually fills up as the progress bar updates.

Next, we’ll move on to the JavaScript section to define the progress bar logic.

JavaScript

The JavaScript section is where we give our progress bar functionality. Here, we create a function that takes in a new progress value and updates the progress bar accordingly. Additionally, we add an event listener to the button element, so that when it’s clicked, the function gets called and the progress bar is updated.

Given below is an example of the code for the progress bar functionality.

// Get the progress bar element and the update button 
const progressBar = document.getElementById("progress-bar");
const updateButton = document.getElementById("update-button");

// Update the progress bar with a new progress value
function updateProgressBar(progress) {
    // Create a new element to represent the progress bar fill
    progressBar.innerHTML = "

“; // Get the progress bar fill element from the HTML const progressBarFill = document.getElementById(“progress-bar-fill”); // Set the width of the progress bar fill based on the progress value progressBarFill.style.width = `${progress}%`; } // Update the progress bar when the button is clicked updateButton.addEventListener(“click”, function () { let progress = 0; // Set the initial progress value to 0 // Update the progress bar every 10 milliseconds until it reaches 100% const intervalId = setInterval(function () { progress += 1; // Increment the progress value updateProgressBar(progress); // Update the progress bar with the new progress value // Stop the interval when the progress reaches 100% if (progress === 100) { clearInterval(intervalId); } }, 100); });

In this above code, we are defining how to update the progress bar when the button is clicked. The first part of the code gets the progress bar and button elements from the HTML, which were defined earlier. The updateProgressBar function creates a new element to represent the progress bar fill and sets its width based on the progress value that is passed in.

The second part of the code adds an event listener to the button that triggers the progress bar update when it is clicked. It sets an initial progress value of 0 and then sets an interval to update the progress bar every 10 milliseconds until it reaches 100%. It increments the progress value by 1 every time it updates and calls the updateProgressBar function with the new progress value to update the progress bar. When the progress reaches 100%, it stops the interval so the progress bar doesn’t keep updating beyond 100%.

Complete Example

The complete example of creating a progress bar using JavaScript will look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar Using JavaScript</title>
</head>
<style>
    /* Styling for the progress bar */
    #progress-bar {
        width: 100%;
        /* Full width */
        height: 15px;
        /* Fixed height */
        background-color: #f1f1f1;
        /* Light gray background */
        border-radius: 20px;
    }

    /* Styling for the progress bar fill */
    #progress-bar-fill {
        height: 100%;
        /* Full height */
        background-color: #ff0000;
        /* Green fill color */
        border-radius: 20px;
    }
</style>

<body>

    <h3>Progress Bar Using JavaScript</h3>

    <!-- The button to update the progress bar -->
    <button id="update-button">Update Progress</button>

    <br> <br>

    <!-- The progress bar element -->
    <div id="progress-bar"></div>

    <script>
        // Get the progress bar element and the update button
        const progressBar = document.getElementById("progress-bar");
         const updateButton = document.getElementById("update-button");

        // Update the progress bar with a new progress value
        function updateProgressBar(progress) {
            // Create a new element to represent the progress bar fill
            progressBar.innerHTML = "<div id='progress-bar-fill'></div>";

            // Get the progress bar fill element from the HTML
            const progressBarFill = document.getElementById("progress-bar-fill");

            // Set the width of the progress bar fill based on the progress value
            progressBarFill.style.width = `${progress}%`;
        }

        // Update the progress bar when the button is clicked
        updateButton.addEventListener("click", function () {
            let progress = 0; // Set the initial progress value to 0

            // Update the progress bar every 10 milliseconds until it reaches 100%
            const intervalId = setInterval(function () {
                progress += 1; // Increment the progress value
                updateProgressBar(progress); // Update the progress bar with the new progress value

                // Stop the interval when the progress reaches 100%
                if (progress === 100) {
                    clearInterval(intervalId); 
                }
            }, 100);
        });
    </script>

</body>

</html>

If you run the code in a web browser, a progress bar and a button labeled “Update Progress Bar” will be displayed. When you click the button, the progress bar will start from 0% and gradually move to 100%. The progress bar will update in real time, showing the percentage of progress completed as the button is clicked.

Conclusion

In this tutorial, we have learned how to create a progress bar using HTML, CSS, and JavaScript. We have defined the structure of the progress bar and button in the HTML section, styled the progress bar using CSS and defined the progress bar functionality using JavaScript.

With the help of a simple function and an event listener, we have been able to update the progress bar from 0% to 100% when the button is clicked. By following these steps, you can easily create a progress bar for your web applications.