Creating Progress Bar using JavaScript

Last Updated : 27 Jun, 2024

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 to creating a progress bar using JavaScript.

Table of Content

Updating the Width of an HTML Element
Using HTML5 progress Element
Using JavaScript

Updating the Width of an HTML Element

It Update the width of a <div> element dynamically to represent progress.

Example: To demonstrate creating a progress bar by updating the width of an HTML element.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Example - Approach 3</title>
    <style>
        .progress-bar {
            width: 100%;
            background-color: #f0f0f0;
            height: 30px;
            margin-bottom: 10px;
        }

        .progress {
            width: 0%;
            height: 100%;
            background-color: #4caf50;
            transition: width 0.3s ease;
        }
    </style>
</head>

<body>

    <h2>Progress Bar - Approach 3</h2>

    <div class="progress-bar">
        <div id="progress" class="progress"></div>
    </div>

    <button onclick="increaseProgress()">Increase Progress</button>
    <button onclick="resetProgress()">Reset</button>

    <script>
        const progressBar = document
            .getElementById('progress');
        let currentProgress = 0;

        function increaseProgress() {
            if (currentProgress < 100) {
                currentProgress += 10;
                progressBar
                    .style
                    .width = currentProgress + '%';
            }
        }

        function resetProgress() {
            currentProgress = 0;
            progressBar.style.width = '0%';
        }
    </script>

</body>

</html>

Output:

Using HTML5 progress Element

One can use the <progress> element in HTML5 to represent progress in the progress bar. Which has built-in support for displaying and updating progress.

Example: To demonstrate creating progress bar using HTML5 <progress> element.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Progress Bar Example - Approach 2</title>
</head>

<body>
    <h2>Progress Bar - Approach 2</h2>

    <progress id="progress" value="0" max="100"></progress>

    <button onclick="increaseProgress()">Increase Progress</button>
    <button onclick="resetProgress()">Reset</button>

    <script>
        const progressElement = document
            .getElementById("progress");

        function increaseProgress() {
            if (progressElement.value < 100) {
                progressElement.value += 10;
            }
        }

        function resetProgress() {
            progressElement.value = 0;
        }
    </script>
</body>

</html>

Output:

Using JavaScript

One can customize the JavaScript to update a visual representation of progress.

Example: To demonstrate creating progress bar using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Progress Bar Example</title>
    <style>
      .progress-bar {
        width: 500px;
        background-color: #f0f0f0;
        height: 30px;
        margin-bottom: 10px;
        border-radius: 15px;
      }

      .progress {
        width: 0px;
        height: 100%;
        background-color: #4caf50;
        transition: width 0.3s ease;
      }
    </style>
  </head>

  <body>
    <h2>Progress Bar</h2>

    <div class="progress-bar">
      <div id="progress" class="progress"></div>
    </div>

    <button onclick="increaseProgress()">Increase Progress</button>
    <button onclick="resetProgress()">Reset</button>

    <script>
      const progressBar = document.getElementById("progress");
      let currentProgress = 0;

      function increaseProgress() {
        if (currentProgress < 100) {
          currentProgress += 5;
          progressBar.style.width = currentProgress + "px";
        }
      }

      function resetProgress() {
        currentProgress = 0;
        progressBar.style.width = "0px";
      }
    </script>
  </body>
</html>

Output:

Introduction to JavaScript

Shubrodeep Banerjee

Improve

Article Tags :

Practice Tags :

Misc

Creating Progress Bar using JavaScript

Updating the Width of an HTML Element

Using HTML5 progress Element

Using JavaScript

Similar Reads

JavaScript Basics

JS Variables & Datatypes

JS Operators

JS Statements

JS Loops

JS Perfomance & Debugging

JS Object

JS Function

JS Array

Thank You!

What kind of Experience do you want to share?