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é.

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

Bước 1: Đặt đoạn CSS này vào trước thẻ ]]></b:skin>
#preloader {
position: fixed;
z-index: 1800;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #202020;
}
.no-js #preloader,
.oldie #preloader {
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%;
}
}
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("#preloader").delay(0).fadeOut();
});
  /*]]>*/
</script>
Bước 3: Đặt đoạn HTML này vào sau thẻ <body> hoặc Ctrl + F và tìm <body rồi dán vào sau thẻ đó nhé.
<!--preloader start-->
<b:if cond='data:blog.pageType == "index"'>
<div id='preloader'>
<div id='loader'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>
</b:if>
<!--preloader 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!
P/s: Bài này mình tình cờ thấy trên template của Sora Templates, cụ thể là temp này, và cũng thấy trên Codepen của Ann Lee, nên các bạn biết code gốc của ai thì comment cho mình biết nhé :v Cảm ơn các bạn.
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Hai, 30 tháng 7, 2018
Tổng số bình luận: 34

34 nhận xét:

  1. Đẹp nha cuuu Tính >< chúc mừng khi Tính cu quay lại bloggg <3

    Trả lờiXóa
  2. tắt hiệu ứng loading đi chớ nó làm blog chậm qá

    Trả lờiXóa
  3. Đã thấy đặt LK đâu e??? nếu e đặt thì sang blog a cmt 1 tiếng để a kiểm tra nhé :s

    Trả lờiXóa