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