Tạo hiệu ứng loading cực ngầu cho blogspot
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 -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>[Chèn đoạn code loading vào đây nhé]</b:if>
Tạo hiệu ứng loading cực ngầu cho blogspot
Reviewed by Lê Quốc Dũng ✓
on
1/15/2019 02:57:00 AM
Rating:
Reviewed by Lê Quốc Dũng ✓
on
1/15/2019 02:57:00 AM
Rating:
No comments: