Hiệu ứng Loading (tải trang) max ngầu cho Blogspot

Chào các bạn, hôm nay mình sẽ đem đến các bạn mẫu loading dành cho blogspot max ngầu luôn. Cái này mình cop trên mạng về tùy biến lại thôi các bạn có thể xem demo tại đây!

Hướng dẫn thực hiện

Truy cập trang blogger.com > Mẫu > Chỉnh sửa HTML tìm đến thẻ <body> rồi dán đoạn code dưới đây phía dưới thẻ đó.
<style>
.loadd{position:fixed;background:#6944ff;z-index:1000;top:0;left:0;width:100%;height:100vh}
.body{position:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite}
.body > span{height:5px;width:35px;background:#fff;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0}
.base span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #fff;border-bottom:6px solid transparent}
.base span:before{content:"";height:22px;width:22px;border-radius:50%;background:#fff;position:absolute;right:-110px;top:-16px}
.base span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #fff;border-bottom:16px solid transparent;top:-16px;right:-98px}
.face{position:absolute;height:12px;width:20px;background:#fff;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px}
.face:after{content:"";height:12px;width:12px;background:#fff;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50% 50%;border-radius:0 0 0 2px}
.body > span > span:nth-child(1),.body > span > span:nth-child(2),.body > span > span:nth-child(3),.body > span > span:nth-child(4){width:30px;height:1px;background:#fff;position:absolute;animation:fazer1 .2s linear infinite}
.body > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite}
.body > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s}
.body > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s}
@keyframes fazer1 {
0%{left:0}
100%{left:-80px;opacity:0}
}
@keyframes fazer2 {
0%{left:0}
100%{left:-100px;opacity:0}
}
@keyframes fazer3 {
0%{left:0}
100%{left:-50px;opacity:0}
}
@keyframes fazer4 {
0%{left:0}
100%{left:-150px;opacity:0}
}
@keyframes speeder {
0%{transform:translate(2px,1px) rotate(0deg)}
10%{transform:translate(-1px,-3px) rotate(-1deg)}
20%{transform:translate(-2px,0px) rotate(1deg)}
30%{transform:translate(1px,2px) rotate(0deg)}
40%{transform:translate(1px,-1px) rotate(1deg)}
50%{transform:translate(-1px,3px) rotate(-1deg)}
60%{transform:translate(-1px,1px) rotate(0deg)}
70%{transform:translate(3px,1px) rotate(-1deg)}
80%{transform:translate(-2px,-1px) rotate(1deg)}
90%{transform:translate(2px,1px) rotate(0deg)}
100%{transform:translate(1px,-2px) rotate(-1deg)}
}
.longfazers{position:absolute;width:100%;height:100%}
.longfazers span{position:absolute;height:2px;width:20%;background:#fff}
.longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}
.longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s}
.longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}
.longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}
@keyframes lf {
0%{left:200%}
100%{left:-200%;opacity:0}
}
@keyframes lf2 {
0%{left:200%}
100%{left:-200%;opacity:0}
}
@keyframes lf3 {
0%{left:200%}
100%{left:-100%;opacity:0}
}
@keyframes lf4 {
0%{left:200%}
100%{left:-100%;opacity:0}
}
</style>
<div class='loadd'>
<div class='body'>
<span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<div class='base'>
<span></span>
<div class='face'></div>
</div>
</div>
<div class='longfazers'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>//<![CDATA[
$(window).on('load', function(){
$('.loadd').fadeOut(1000);
})
//]]></script>
Các bạn có thể sử dụng thẻ điều kiện cho nó để chỉ hiển thị tại một trang nhất định. Nếu các bạn muốn như mình chỉ hiển thị tại trang chủ thì các bạn dùng thẻ điều kiện sau:
<b:if cond='data:view.isHomepage'>
<!--Đoạn code ở trên-->
</b:if>
Ngoài ra các bạn có thể tham khảo bài sau để biết thêm thẻ điều kiện khác: Thẻ điều kiện Blogger/Blogspot là gì? Và tổng hợp các thẻ điều kiện mới nhất

Hí hí

0/Đăng Nhận Xét/Nhận Xét

Mới hơn Cũ hơn