Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

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

Cập nhật: 24/05/2019 Bởi Duy... - A- A+

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í

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter