SHARE HIỆU ỨNG LOADING TUYỆT ĐẸP CHO BLOG

Tác giả: Hoàng Thành

Xuất bản: lúc 00:44 ngày 02/09/2018

TẢN MẠN

Hello, xin chào tất cả các bạn đã quay trở lại với blog của mình !!! Nhân ngày lễ Quốc Khánh (02-09) được nghỉ ở nhà, không đi chơi đâu nên ngồi viết bài - gọi là có tý quà hihi. Không liên thiên nữa thì hôm nay mình xin phép chia sẻ hiệu ứng load trang cực kì cute :)

THÔNG TIN CODE

Code Name : Effect Loading
Responsive : Có
Develop : Trần Thanh Bình
Edit & Upgrade : Nguyễn Dương Hoàng Thành

LIÊN HỆ CLICK NOW XEM TRƯỚC CLICK NOW

THỰC HÀNH

Rất là đơn giản, đơn giản vô cùng luôn !!! Các bạn chỉ cần chèn code bên đoạn code bên dưới vào ngay sau thẻ <body> hoặc <body

<!-- Bắt đầu loading -->
<style>
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}500%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
#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:#000000;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:#ff0050}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#ff0000;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:#ff0050}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p><a href='//fb.com/www.leanhduc.xyz' style='color:#fff'><b target='blank' title='Click Now'><span style='background: url(&quot;https://blogger.googleusercontent.com/img/proxy/AVvXsEgxiv9BesRNunnCW8QHW31LiT3mXpm3-DKM1gzwtdySYiFbXUg0q8EpmDJBYi_RT0G_ZU7_3P8oik9h_5nxiyVvdX9aFZs13GUKPFCHD5yll-aWM81-ihjEz4C-5vzu2dSbhs3OE4e0dV_M6QiUH8sQ0CgbrpK7BDO5gnm_TjZ3p2o=s0-d&quot;) repeat scroll 0% 0% transparent; color:#ff0000; text-shadow: 0pt 0pt #ff0000, 0pt 1pt 0.3em #ff0000;'><i class='fa fa-heart animated infinite pulse'/></span></b></a></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>
<!-- kết thúc Loading -->