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%;
}
}</head>Bước 3: Đặt đoạn HTML này vào sau thẻ<script type='text/javascript'>
/*<![CDATA[*/
$(window).bind("load", function () {
jQuery("#loader").fadeOut("slow");
jQuery("#preloader").delay(0).fadeOut();
});
/*]]>*/
</script>
<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.
không có demo hã ku tính :V
Trả lờiXóaNgoài trang chủ blog t đấy tml :v
Xóacái này giống giống của blog nguyễn khải share nè :V
XóaĐâu ném t xem :v
Xóangon lém :V
Trả lờiXóaNgon cc ý :v
Xóangon lém :V
Trả lờiXóaĐm m spam cmt à :v
Xóađặt liên kết ko bác?
Trả lờiXóaOk, bạn vào đây comment nhé.
XóaTưởng bỏ blog rồi =))
Trả lờiXóaK chịu được anh ưi :v
XóaĐẹp nha cuuu Tính >< chúc mừng khi Tính cu quay lại bloggg <3
Trả lờiXóaƯớc gì được cao liên kết lên nhỉ???
XóaMai nhé, giờ đang onl đt.
XóaĐã cho lên cao ròi nhé ku Duck :v
XóaOk cu Tính
XóaHay đó em
Trả lờiXóaCảm ơn anh nhé :v
XóaĐã áp dụng nha cu Tính
Trả lờiXóaOk cu Duck :v
XóaCó áp dụng méo đâu hả ml Duck :v
XóaNhìn lại đi cu Tính
XóaSao t không thấy :v
Xóacòn chỗ lk không ông
Trả lờiXóaCòn nhé bác.
Xóatắt hiệu ứng loading đi chớ nó làm blog chậm qá
Trả lờiXóaKh biết blog ông sao chứ t thấy bth mà :v
Xóamáy tui vô blog ông thấy chậm :v
XóaChắc tùy máy th :v
Xóahoạt động lại rồi à em
Trả lờiXóaĐúng roài anh :v
XóaĐã 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óaOki anh
Xóa