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.5slinear 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 1sease-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.3scubic-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.3scubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3sease-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>
<scripttype='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
functionis_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
});
//]]>
</script>
<!-- End Page Loading -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>[Chèn đoạn code loading vào đây nhé]</b:if>
Subscribe Our Newsletter
0 Response to "Hiệu ứng loading cho blogger (p1)"
Đăng nhận xét