Create a Progress Bar using JavaScript

The progress bar is used to indicate the progress of any activity. Progress bars are often used to indicate download and upload status. In other words, the Progress Bars can be used to show the status of anything that goes on.

follow these simple steps to create a basic progress bar:

Creating a Progress Bar

1.Adding HTML:

Use this code in html file to create a structure of progress bar.

<div id="my-progress">
<div id="my-bar"></div>
</div>

2.Add CSS

To design and change the style of your progress bar.

#my-progress {
    width: 100%;
    background-color: white;
    border:1px solid black;
}
#my-bar {
    width: 1%;
    height: 30px;
    background-color: green;
}

3.Add JavaScript

Add javascript for animated & run your progress bar.

var i = 0;

function move() {
    if (i == 0) {
        i = 1;
        var elem = document.getElementById("my-bar");
        var width = 1;
        var id = setInterval(frame, 10);

        function frame() {
            if (width >= 100) {
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + "%";
            }
        }
    }
}

 

Full Source Code

Link HTML, CSS and JavaScript elements

<!DOCTYPE html> 
<html>
   <style> 
      #my-progress {
      width: 100%;
      background-color: white;
      border:1px solid black;
      }
      #my-bar {
      width: 1%;
      height: 30px;
      background-color: green;
      }
   </style>
   <script>
      var i = 0;
      
      function move() {
          if (i == 0) {  i = 1;
          var elem =document.getElementById("my-bar");
          var width = 1;
          var id = setInterval(frame, 10);
      function frame() {
          if (width >= 100) {
                                                  clearInterval(id);
                                                          i = 0;
                                                                      } else {
                                                                                      width++;
                                                                                                        elem.style.width = width + "%";
                                                                                                                  }
                                                                                                                          }
                                                                                                                              }
                                                                                                                              }
   </script>
   <body>
      <div id="my-progress">
         <div id="my-bar"></div>
         </div>
         </br>
         <button onclick="move()">Click Me</button>
      
   </body>
</html>

On clicking the (start) button,the progress start running.

Progress Bar With Label

To add a number label to indicate how far a user has been through this process, the addition of a new item inside or outside the progress bar is required that will indicate the status of continuity.

 

1.Add CSS

To add a label, make the following changes to the code above in the “my-bar” section.

#my-bar {
  width: 1;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* center the text or label */
  line-height: 30px;
  color: white;
}

2.Add JavaScript

If you want to make changes on text within the label with the same amount of progress bar width

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("my-bar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width + "%";
      }
    }
  }
}

 

 

Leave a Comment

Your email address will not be published.