Hướng dẫn tạo hiệu ứng Loader sang hai bên khi truy cập Blog

Đăng Ngày: 02:01:00

Đức Vũ

Hello ! Xin chào 5 xị anh em ^^ Nay mình hướng dẫn các bạn làm hiệu ứng Loader khi truy cập vào Blog nhé. Nó đơn giản trên từng cen ti mét thôi.

CÁCH SỬ DỤNG 

Bước 1: Truy cập vào Blogger.com 

Bước 2: Chọn phần Chủ đề - Chỉnh sữa HTML.
Bước 3: Thêm đoạn code này ngay dưới thẻ đóng </head>

Bước 4: Lưu Template lại vào xem Blog của bạn.

DEMO

<!-- Loắc Ơ by TienDucBlog -->
<style>
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999999;overflow:hidden}.no-js #loader-wrapper{display:none}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#16a085;-webkit-animation:spin 1.7s linear infinite;animation:spin 1.7s linear infinite;z-index:11}#loader:before{content:&quot;&quot;;position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin-reverse .6s linear infinite;animation:spin-reverse .6s linear infinite}#loader:after{content:&quot;&quot;;position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin-reverse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes spin-reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#222;z-index:10}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);transform:translateX(100%);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1)}.loaded #loader{opacity:0;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:all .3s 1s ease-out}
</style>
<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

  // Fakes the loading setting a timeout
    setTimeout(function() {
        $('body').addClass('loaded');
    }, 500);

});
//]]>
</script>
<div class='pace'/>
<!-- Loắc Ơ by TienDucBlog -->

LỜI KẾT 

Chỉ với vài bước như thế ! Blog bạn sẽ trở lên bắt mắt hơn. Ngại gì mà không thử cơ chứ. Chúc các bạn thành công.