Creating a progress bar using JavaScript

#javascript #webdev #programming #css

A progress bar is used to represent the progress of any running task. Progress bars are generally used to show the status of uploading and downloading. In other words, we can say that progress bars can be used to depict the status of whatever is going on.

To create a basic progress bar using JavaScript, the following steps should be performed:

Create an HTML structure for your progress bar:
Link HTML, CSS and JavaScript elements
Creating a Labeled Progress Bar

Below is the complete program using HTML, CSS, and JavaScript to create a tagged progress bar:

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