Tổng hợp một số kiểu loader đẹp cho blogspot

Chào mừng các bạn đã đến với blog của mình.Hôm nay mình xin chia sẻ đến các bạn một số kiểu loader đẹp mà mình vừa thấy trên Arlina Design.
Đặc điểm của những kiểu load này là làm cho Blog của bạn trở lên chuyên nghiệp hơn và nó chỉ có một lượng rất ít css và javascript nên không hề ảnh hưởng nhiều đến tốc độ load trang của blog bạn và cũng không ảnh hưởng đến trải nghiệm của người dùng.

Những hiệu ứng loader mà tôi sắp chia sẻ bên dưới chủ yếu đều hoạt động tốt với thư viện Jquery phiên bản 1.7.1.Nếu blog của bạn chưa có thì hãy thêm đoạn html này vào trước thẻ đóng </head> nhé.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Với mọi style loader thì bạn đều phải thêm đoạn js này vào trước thẻ đóng </head> nhé

<script type='text/javascript'>

//<![CDATA[

// Preloader

$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});

//]]>

</script>

Kiểu một:

Css:

<style type='text/css'>

/* Preloader */

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}

@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}

.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}

@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}

@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}

</style>

Html:

<div id='preloader'>

<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>

   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>

</svg>

</div>

Demo

See the Pen Memasang Efek Preloading Keren di Blogger by Arlina Design (@arlinadesign) on CodePen.

Kiểu 2:

Css:

<style type='text/css'>

/* Preloader */

#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}

#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}

@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}

.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}

@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}

#s1{animation:anim 1.8s linear infinite}

#s2{animation:anim 1.8s linear infinite -.6s}

#s3{animation:anim 1.8s linear infinite -1.2s}

</style>

Html:

<div id='preloader'>

<div id='container' class='spinner'>

  <div id='dot'></div>

    <div class='step' id='s1'></div>

    <div class='step' id='s2'></div>

    <div class='step' id='s3'></div>

</div>

</div>

Demo:

See the Pen Bounce Dot by Arlina Design (@arlinadesign) on CodePen.

*Lưu ý:còn một số style loader nữa mình không viết thêm các bạn muốn tham khảo thì xem thêm Tại đây nhé