Cách tạo: Thanh tiến độ JavaScript

Tạo thanh tiến độ

Bước 1 - Thêm HTML:

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

Bước 2 - Thêm CSS:

#myProgress {
  chiều rộng: 100%;
  màu nền: xám;
}
#myBar {
  chiều rộng: 1%;
  chiều cao: 30px;
  màu nền: xanh;
}

Bước 3 - Thêm JavaScript:

Tạo thanh tiến độ động bằng JavaScript (hiệu ứng hoạt hình):

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;
      }
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

Thử ngay

Thêm thẻ

Nếu bạn muốn thêm thẻ để chỉ ra tiến độ hiện tại của người dùng, bạn có thể thêm một yếu tố mới trong thanh tiến độ (hoặc bên ngoài)

Bước 1 - Thêm HTML:

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

Bước 2 - Thêm CSS:

#myBar {
  chiều rộng: 10%;
  chiều cao: 30px;
  màu nền: #04AA6D;
  canh chỉnh văn bản: giữa; /* Trung tâm ngang (nếu cần) */
  chiều cao dòng: 30px; /* Trung tâm dọc */
  màu: trắng;
}

Thử ngay

Bước 3 - Thêm JavaScript:

Nếu bạn muốn cập nhật động văn bản trong thẻ, để nó tương ứng với giá trị chiều rộng của thanh tiến độ, hãy thêm nội dung sau:

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

Thử ngay