<!DOCTYPE html>
<html>
<title>Progress Bar Download bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="canonical" href="https://www.cdn.getweb.dev/docs/v1/css/getweb.css">


<body>
<div class="gw-container"
<h2>Dynamic Progress Bar or download bar</h2>
<p>Click me to download:</p>

  
<!-------download bar--->
<div class="gw-light-grey">
  <div id="myBar" class="gw-container gw-red gw-center" style="width:20%">20%</div>
</div>
<br>
<a id="myBar" class="gw-button gw-black" onclick="move()">Download</a> 

</div>


</body>
</html> 

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

External CSS

  1. https://www.cdn.getweb.dev/docs/v1/css/getweb.css
  2. https://www.cdn.getweb.dev/docs/v1.1/css/getweb_v.1.1.css

External JavaScript

This Pen doesn't use any external JavaScript resources.