Tạo hiệu ứng loader đẹp mắt cho blogspot

Chào mừng các bạn đã đến với Gia Huy NY Blog.Hôm nay chúng tôi xin chia sẻ hiệu ứng loader tuyệt đẹp cho các bạn Tạo hiệu ứng loader đẹp mắt cho blogspot

Các bước thực hiện

<div id="preloader">
<div class="spinner">
<span class="ball-1"></span>
<span class="ball-2"></span>
<span class="ball-3"></span>
<span class="ball-4"></span>
<span class="ball-5"></span>
<span class="ball-6"></span>
<span class="ball-7"></span>
<span class="ball-8"></span>
</div>
</div>
<style>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
<script>
// Preloader
$(window).load(function(){$("#loader").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
</script>
Chỉ cần một bước Các bạn thêm đoạn code bên trên vào trước thẻ body
Chỉ đơn giản vậy thôi..
View-source:Toishare

Cùng bình luận bài viết