Trang chủ
JavaScript
Share

Tạo Trang LOADING PROGRESS Giống Trang Chờ Get Link

Tạo Trang LOADING PROGRESS Giống Trang Chờ Get Link - CuongbokIT
Hi xin chào hôm nay mình sẽ Share Code trang Loading Progress, gọi là Loading đi cho nó ngắn, Loading tức là tải, Progress là phát triển, 2 từ ghép vào là tải lên đến 100%. Cái này rất phổ biến, hầu như trang web nào có trang chờ chuyển hướng cũng dùng Template này, dùng Css Style của Bootstrap luôn nên code khá ngắn, chỉ hơi dài ở đoạn JavaScript thôi!

Các bước để tạo trang Loading Progress:

Bước 1: Dùng Css Bootstrap qua thẻ Link 

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

Bước 2: Thêm HTML, thêm đoạn code sau vào bất cứ đâu bạn muốn nó xuất hiện.

<center>
    <p id="thbao"></p>
    <div class="progress">
      <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span id="current-progress"></span>
      </div>
    </div>
  </center>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
Bước 3: Thêm JS vào trước hoặc sau thẻ đóng </body> đều được (không nên đặt trong head nhé vì nó gây lag web hơn).

<script>
  var thbao = document.getElementById('thbao');
    $(function () {
      var current_progress = 0;
      var interval = setInterval(function () {
        var randomPlus = Math.floor(Math.random() * 10);
        current_progress += randomPlus;
        if(current_progress >= 100){current_progress = 100}
        $("#dynamic").
        css("width", current_progress + "%").
        attr("aria-valuenow", current_progress).
        text(current_progress + "% Complete");
        if (current_progress >= 100){
          clearInterval(interval);
          thbao.innerHTML = 'Tải thành công! By <a rel="follow" target="_blank" href="https://cuongbokit.blogspot.com">CuongbokIT</a>';
        }
      }, 1000);
    });
   </script>
Bạn chú ý những phần mình tô đỏ:
- Số 10 đầu tiên: Sau mỗi khoảng thời gian X sẽ cộng thêm ngẫu nhiên 1 số trong khoảng Y (từ 0-> 10 giây) vào %
- Complete: Bạn có thể đổi là Loading hoặc Đã tải
1000: Khoảng thời gian X
Như vậy là mình đã share cho bạn code trang Loading Progress giống với trang chờ get link, chúc bạn thành công, dưới đây là phần Full code:

Full code:


<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<center>
	<p id="thbao"></p>
    <div class="progress">
      <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span id="current-progress"></span>
      </div>
    </div>
  </center>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script>
  var thbao = document.getElementById('thbao');
    $(function () {
      var current_progress = 0;
      var interval = setInterval(function () {
        var randomPlus = Math.floor(Math.random() * 10);
        current_progress += randomPlus;
        if(current_progress >= 100){current_progress = 100}
        $("#dynamic").
        css("width", current_progress + "%").
        attr("aria-valuenow", current_progress).
        text(current_progress + "% Complete");
        if (current_progress >= 100){
          clearInterval(interval);
          thbao.innerHTML = 'Tải thành công! By <a rel="follow" target="_blank" href="https://cuongbokit.blogspot.com">CuongbokIT</a>';
        }
      }, 1000);
    });
   </script>

Thấy hay thì share tới mọi người cùng biết nhé! <3


Đăng nhận xét

Lưu ý

Khuyên bạn hạn chế bình luận ẩn danh, hãy đăng nhập bằng tài khoản Google.

Nếu muốn bình luận 1 đoạn code, bạn hãy mã hóa code để code hiển thị chính xác nhé!