Here i have explained how to create a progress bar using JavaScript.

Step1: copy the following HTML Markup and paste it inside body tag.

HTML Markup

<div id="myProgress">
<div id="myBar"></div>
</div>
<button onclick="move()">Click Me</button> 

Step2: copy the following CSS and paste it inside head tag.

CSS

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

Step3: copy the following javascript and paste it inside head tag.

Javascript

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

Screenshot

Add Comments