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.

To create a basic Progress Bar using JavaScript, the following steps needs to be carried out:

  1. Create HTML structure for your progress bar:
    The code below contains two “div” tag elements named “Progress_Status” and “myprogressbar”.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div id="Progress_Status">
      <div id="myprogressBar"></div>
    </div>

    chevron_right

    
    

  2. Adding CSS:
    The code below is used to set the width and the background color of the progress bar as well as the progress status in the bar.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #Progress_Status {
      width: 50%;
      background-color: #ddd;
    }
      
    #myprogressBar {
      width: 1%;
      height: 35px;
      background-color: #4CAF50;
      text-align: center;
      line-height: 32px;
      color: black;
    }

    chevron_right

    
    

  3. Adding JavaScript:
    The code below creates a dynamic progess bar(animated) using javascript functions “update” and “scene”.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    function update() {
      var element = document.getElementById("myprogressBar");   
      var width = 1;
      var identity = setInterval(scene, 10);
      function scene() {
        if (width >= 100) {
          clearInterval(identity);
        } else {
          width++; 
          element.style.width = width + '%'; 
        }
      }
    }
    </script>

    chevron_right

    
    

  4. Link the HTML,CSS and JavaScript elements
    Below program shows the complete code of progress bar linking the above HTML, CSS and JavaScript Codes:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <style>
    #Progress_Status {
      width: 50%;
      background-color: #ddd;
    }
      
    #myprogressBar {
      width: 2%;
      height: 20px;
      background-color: #4CAF50;
    }
    </style>
    <body>
      
    <h3>Example of Progress Bar Using JavaScript</h3>
      
    <p>Download Status of a File:</p>
      
    <div id="Progress_Status">
      <div id="myprogressBar"></div>
    </div>
      
    <br>
    <button onclick="update()">Start Download</button
      
    <script>
    function update() {
      var element = document.getElementById("myprogressBar");   
      var width = 1;
      var identity = setInterval(scene, 10);
      function scene() {
        if (width >= 100) {
          clearInterval(identity);
        } else {
          width++; 
          element.style.width = width + '%'; 
        }
      }
    }
    </script>
      
    </body>
    </html>

    chevron_right

    
    

  5. Output :

    On clicking the “start download” button,the progress animation in the progress bar can be seen.


Creating A Progress Bar with Label

To add a numeric label to indicate how far the user is in the process, an addition of a new element inside or outside the progress bar is required which will display the progress status.

To add a label, make the following changes in the above code in “myprogressbar” element.

filter_none

edit
close

play_arrow

link
brightness_4
code

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

chevron_right


Make the following changes in the Function “update” and “scene” to make the numeric label update along with the progress in the progress bar.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
    
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  
</script>

chevron_right


Below is the complete program using HTML , CSS and JavaScript to create a Progress Bar with Label:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<style>
  
#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
  
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}
  
  
</style>
<body>
  
<h3>Example of Progress Bar Using JavaScript</h3>
  
<p>Download Status of a File:</p>
  
<div id="Progress_Status">
  <div id="myprogressBar">1%</div>
</div>
  
<br>
<button onclick="update()">Start Download</button
  
<script>
  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  
</script>
  
</body>
</html>

chevron_right


Output :




My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.