DEV Community

Rohit More
Rohit More

Posted on

Creating a progress bar using JavaScript

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>

Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (1)

Collapse
 
frankwisniewski profile image
Frank Wisniewski • Edited

W3.CSS Progress Bars

It's no use just posting the same content with changed variable names.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay