Tạo hiệu ứng tải trang cực thích cho trang web

Tài liệu
Tạo hiệu ứng tải trang cực thích cho trang web
Chuyên mục
Người đăng
Đăng vào
Chào các bạn, cũng đã lâu rồi thì mình chưa hướng dẫn thủ thuật gì nên vì thế hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng tải trang cho trang web.

Demo hình ảnh:

Hướng dẫn cách làm:

Việc bạn cần làm là thêm đoạn code này dưới thẻ <body> trong HTML
<style>
/* 
=======================
   Preloader
=======================
*/
#preloader{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#fff;z-index:9999999999;background-repeat:no-repeat;background-position:center center;font-family:Open Sans,sans-serif}
blockquote{font-size:inherit}
.loading-page{background:#0d0d0d;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.loading-page .counter{text-align:center}
.loading-page .counter p{font-size:40px;font-weight:100;color:#E6AF2A}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#E6AF2A;border:none;height:2px;float:left}
.loading-page .counter{position:relative;width:200px}
.loading-page .counter h1.abs{position:absolute;top:0;width:100%}
.loading-page .counter .color{width:0;overflow:hidden;color:#E6AF2A}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p>loading</p>
<h1>0%
<!-- h1.abs loading h1.abs.color loading -->
</h1>
<hr/>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
// Loader
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
    counter++;
    c++;
      
    if(counter == 101) {
        clearInterval(i);
        $("#preloader").delay(100).fadeOut(500);
    }
  }, 50);
//]]></script>
Chúc bạn thành công!

Hiện có bình luận