Live Code Editor Version 2.0

Hướng dẫn tạo Progress Bar với Javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
          .container {
            width: 500px;
            margin: auto;
          }

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

#myBar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo Progress Bar</h2>

<div id="myProgress">
          <div id="myBar"></div>
        </div>
        <br>
        <button onclick="move()" id="button">Download</button> 
      </div>
    </body>
    <script>
      function move() {
        var elem = document.getElementById("myBar");   
        var width = 0;
        // mỗi 0,5s gọi hàm frame một lần
        var id = setInterval(frame, 500);
        var btn = document.getElementById("button"); 
        function frame() {
          if (width >= 100) {
            // nếu đã 100% thì ngừng việc gọi hàm
            clearInterval(id);
          } else {
            // tăng chiều dài lên 1
            width++; 
            elem.style.width = width + '%'; 
            // tăng số liệu lên 1
            elem.innerHTML = width  + '%';
          }
        }
        btn.style.display = "none";
      }
    </script>
</html>