Chào mừng!

Bằng cách đăng ký với chúng tôi, bạn sẽ có thể thảo luận, chia sẻ và nhắn tin riêng tư với các thành viên khác trong cộng đồng của chúng tôi.

Đăng ký ngay!
  • Truy cập và ủng hộ DienDanIT.NET bằng cách click dăm 3 cái quảng cáo để duy trì sever nhé.

Share HƯỚNG DẪN TẠO HIỆU ỨNG LOADER SANG HAI BÊN KHI TRUY CẬP BLOG

Đào Hữu Nhất

Thành Viên VIP
DienDanIT 2018
Tham gia
31/10/18
Bài viết
503
Lượt Thích
204
VNĐ
7,026
VNĐ
7,026
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.
Xin vui lòng, Đăng nhập hoặc Đăng ký để xem nội dung URL.


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.
Xin vui lòng, Đăng nhập hoặc Đăng ký để xem nội dung URL.

Mã:
<!-- Loắc Ơ by DaoHuuNhat -->
<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 DaoHuuNhat -->
 
Top Bottom