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>
#tgb-loader {Bước 2: Đặt đoạn js này vào trước thẻ
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%;
}
}
</head>
<script type='text/javascript'>Bước 3: Đặt đoạn HTML này vào sau thẻ
/*<![CDATA[*/
$(window).bind("load", function () {
jQuery("#loader").fadeOut("slow");
jQuery("#tgb-loader").delay(0).fadeOut();
});
/*]]>*/
</script>
<body>
hoặc Ctrl + F và tìm <body
rồi dán vào sau thẻ đó nhé. <!--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-->
Không có nhận xét nào:
Đăng nhận xét