Chào các bạn đọc giả của Codedayroi.com, hôm nay mình sẽ đem đến các bạn mẫu loading dành riêng cho blogspot cực ngầu. Và các bạn có thể xem demo hình ảnh bên dưới để rõ hơn nhé
HƯỚNG DẪN CÁCH LÀM:
Để thêm code này các bạn vào
Chỉnh sửa HTML trong
blogger.com và tìm đoạn thẻ
<body> rồi thêm toàn bộ đoạn code bên dưới xuống nó
<!-- Start Page Loading -->
<style>
/*----------------------------------------
Pre-loader
------------------------------------------*/
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #eceff1;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#loader-logo {
display: block;
position: absolute;
left: 48%;
top: 46%;
background: url("https://i.imgur.com/Nj02xhh.png") no-repeat center center;
z-index: 1001;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.progress {
background-color: rgba(255, 64, 129, 0.22);
}
/* JavaScript Turned Off */
.no-js #loader-wrapper {
display: none;
}
</style>
<div id='loader-wrapper'>
<div id='loader'></div>
<div class='loader-section section-left'></div>
<div class='loader-section section-right'></div>
</div>
<script type='text/javascript'>
//<![CDATA[
/*Preloader*/
$(window).on('load', function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 200);
});
$(function() {
"use strict";
var window_width = $(window).width();
var openIndex;
// Detect touch screen and enable scrollbar if necessary
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
});
//]]>
</script>
<!-- End Page Loading -->
Mình có 1 lưu ý nhỏ với các bạn là, nếu muốn đoạn code đó load tại trang chủ thì chèn nó vào trong đoạn thẻ điều kiện ở trang chủ bên dưới
<b:if cond='data:blog.url == data:blog.homepageUrl'>[Chèn đoạn code loading vào đây nhé]</b:if>
Chúc các bạn thành công!
