JavaScript Progressbar Loading

Chào mọi người.

Bài viết này mình sẽ hướng dẫn mọi người một thủ thuật về việc tạo một Processbar Loading sữ dụng Javascript

Thủ thuật này hoàn toàn đơn giản nhé mọi người.

Chúng ta bắt đầu.

Đầu tiên với thẻ HTML

<div id="myProgress">
  <div id="myBar"></div>
</div>

Tiếp theo đoạn mã CSS

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

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

Và cuối cùng là đoạn mã Javascript

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

Như vậy đã hoàn thành việc thủ thuật trên.

Chúc mọi người thành công.

Demo tại đây.