Skip to content
Related Articles

Related Articles

Improve Article

Creating Progress Bar using JavaScript

  • Last Updated : 07 Jul, 2021

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”. 
     

html




<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>
  1.  
  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.
     

html




#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
 
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}
  1.  
  2. Adding JavaScript
    The code below creates a dynamic progress bar(animated) using javascript functions “update” and “scene”.
     

html




<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>
  1.  
  2. Link the HTML,CSS and JavaScript elements 
    Below program shows the complete code of progress bar linking the above HTML, CSS and JavaScript Codes: 
     

html






<!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>
  1.  

 

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. 
 

html




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

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

html




<script>
 
function update() {
  var element = document.getElementById("myprogressBar");  
  var width = 1;
  var identity = setInterval(scene, 10);
   
  function scene() {
    if (wid

Output :
};adpushup.que.push(function(){adpushup.triggerAd("82d2079a-8120-480f-9fc7-5cda825d56e7");});


My Personal Notes arrow_drop_up
Recommended Articles
Page :