Gia Huy NY BLOG

Blog chia sẻ ảnh chất lượng cao - thủ thuật hay - ảnh bìa chất

Share hiệu ứng Loading đẹp mắt cho Blogspot

Chào các bạn, hôm nay mình sẽ share cho các bạn hiệu ứng Loading đẹp mắt cho Blogspot. Demo thì các bạn xem ở phần trang chủ của Blog mình. Chúng ta cùng bắt đầu nhé.
Share hiệu ứng Loading đẹp mắt cho Blogspot

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

Bước 1: Đặt đoạn CSS này vào trước thẻ
]]></b:skin>
#tgb-loader { position: fixed; z-index: 1800; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #202020; } .no-js #tgb-loader, .oldie #tgb-loader { display: none } #loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em); } .loader { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #Fff; top: 50%; animation: loader 2s infinite ease; } .loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } }a
Bước 2: Đặt đoạn js này vào trước thẻ
</head>
<script type='text/javascript'> /*<![CDATA[*/ $(window).bind("load", function () { jQuery("#loader").fadeOut("slow"); jQuery("#tgb-loader").delay(0).fadeOut(); }); /*]]>*/ </script>
Bước 3: Đặt đoạn HTML này vào sau thẻ
<body>
<!--tgb-loader start--> <b:if cond='data:blog.pageType == "index"'> <div id='tgb-loader'> <div id='loader'> <span class='loader'><span class='loader-inner'></span></span> </div> </div> </b:if> <!--tgb-loader end-->

Tổng kết

Không có gì để tổng kết, chúc các bạn thành công. Có thắc mắc gì hãy để lại comment phía dưới để được hỗ trợ nhé. See ya! Share hiệu ứng Loading đẹp mắt cho Blogspot | Gia Huy NY

Lê Võ Gia Huy Designer

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Mọi chi tiết xin liên hệ:
Email : giahuylevo412@gmail.com
Facebook: https://www.facebook.com/giahuynyblog/
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • 3 nhận xét: