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!
  • Diễn Đàn VuiCode tạm thời chuyển xang tên miền mới là DienDanIT.NET. Bạn hãy truy cập bằng tên miền mới 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

DienDanIT 2018
Tham gia
31/10/18
Bài viết
468
Lượt Thích
200
VNĐ
966
VNĐ
966
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.
Bạn không có quyền xem liên kết này Đăng nhập hoặc Đăng ký.


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.
Bạn không có quyền xem liên kết này Đăng nhập hoặc Đăng ký.

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