Dynamic Progress Bar In Html

The Dynamic Progress Bar in Html shows how much work has been done and how much time is left to completion of your work. 

Here we are using the word “Dynamic” which means it works Automatically, no one can increase or decrease the Progress Bar so that’s why it is called Dynamic Progress Bar.

Let’s see how to make a Dynamic Progress Bar in HTML.

How To Make Dynamic Progress Bar In Html

Html Code

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Progress Bar in HTML</title>
</head>
<body>
<div id="Progress_percentage">
  <div id="progressBarlabel">1%</div>
</div>
<br>
<button onclick="progress()">click here</button> 
</body>
</html>

 First of all, we created an HTML Document, and then we wrote a simple HTML structure code. In the above code, we just created two divs as you can see the first one is progress_percentage and the other one is progressbarlabel, you can name it as you want. Then we created a button and made a function called progress(). When the user clicks on the button, our function progress() will run.

It will not look good without CSS we have to add some CSS for designing to give our Progress Bar an attractive look.

CSS Code

<style>
#Progress_percentage {
  width: 50%;
  background-color: #ddd;
  position: relative;
  left: 300px;
  top: 250px;
  border-radius: 20px;
}
#progressBarlabel {
  width: 1%;
  height: 35px;
  background-color: rgb(19, 201, 16);
  text-align: center;
  line-height: 32px;
  color: white;
  margin-left: 2px;
border-radius: 20px;
font-weight: bold;
}
 #click{
   height: 40px;
   width: 150px;
  border-radius: 20px;
  font-weight: bold;
  color: white;
  background-color: rgb(19, 201, 16);
  border: none;
  position: relative;
  top: 300px;
  left: 570px;
 }
</style>

In the above CSS code, we targeted the div ids and assign some CSS properties to them like positions, colors, borders, height, and width so the Progress Bar will look perfect.

Now, let’s move forward to our Js code which will make our progress bar dynamic.

JavaScript Code

<script>
function progress() {
  var ele = document.getElementById("progressBarlabel");   
  var width = 1;
  var iden = setInterval(probar, 10);
  function probar() {
    if (width >= 100) {
      clearInterval(iden);
    } else {
      width++; 
      ele.style.width = width + '%'; 
      ele.innerHTML = width * 1  + '%';
    }
  }
}
</script>

In the above js code, we created two functions named progress and probar, lets’s understand these functions deeply what task these functions will perform?

The function progress() will call when the button will be pressed, then We declared 3 variables, in the first variable named( ele) we took an element using the” Dom” function from Progressbarlabel div then in the second variable named( width) we assign a number “1” which will be increased, and then in the third variable named(iden) in which we assign the “setinterval” method with parameters the set interval method will set the interval of 10 milliseconds.

Then we create another function called “probar” and in this function, we made a condition that if the width is greater than equal to 100 so clear the interval else do increment in the variable (width) then we just concatenate the width with a % sign.

Note: a width is just a label number and the green color, will be increased for showing progress.  

In short, the progress bar and the label number will increase every 10 milliseconds till they reach 100%, and the progress bar will start progressing when the button is pressed.  

Below is the full code for making a Dynamic Progress Bar in HTML.

Complete Code

<!DOCTYPE html>
<html>
<style>
#Progress_percentage {
  width: 50%;
  background-color: #ddd;
  position: relative;
  left: 300px;
  top: 250px;
  border-radius: 20px;
}
#progressBarlabel {
  width: 1%;
  height: 35px;
  background-color: rgb(19, 201, 16);
  text-align: center;
  line-height: 32px;
  color: white;
  margin-left: 2px;
border-radius: 20px;
font-weight: bold;
}
 #click{
   height: 40px;
   width: 150px;
  border-radius: 20px;
  font-weight: bold;
  color: white;
  background-color: rgb(19, 201, 16);
  border: none;
  position: relative;
  top: 300px;
  left: 570px;
 } 
</style>
<body>
<div id="Progress_percentage">
  <div id="progressBarlabel">1%</div>
</div>
<br>
<button id="click" onclick="progress()">Click Here</button> 
<script>
function progress() {
  var ele = document.getElementById("progressBarlabel");   
  var width = 1;
  var iden = setInterval(probar, 10);
  function probar() {
    if (width >= 100) {
      clearInterval(iden);
    } else {
      width++; 
      ele.style.width = width + '%'; 
      ele.innerHTML = width * 1  + '%';
    }
  }
}
</script>  
</body>
</html>

By using the above code you can easily create a cool Dynamic Progress Bar.

Output (Demo)

Conclusion

In this tutorial, we find out what is a Dynamic Progress Bar, and then we see HTML, CSS, and Javascript code for creating it.

Suggested Articles:

Leave a Comment