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

Chào mừng đã đến với blog của mình.Do bận công việc nên dạo này mình sẽ ít khi hoạt động blog.Bữa nay mình sẽ hướng dẫn các bạn cách tạo hiệu ứng loading đẹp mắt cho blogspot

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

Chỉ cần một bước Các bạn thêm đoạn code bên dưới vào trước thẻ body

<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ỉ đơn giản vậy thôi..
View-source:Toishare