Tạo hiệu ứng loading cực ngầu cho blogspot

Tạo hiệu ứng loading cực ngầu cho blogspot

Tạo hiệu ứng loading cực ngầu cho blogspot

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...
Comment tháng 3 12, 2018
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!
Tạo hiệu ứng loading cực ngầu cho blogspot Tạo hiệu ứng loading cực ngầu cho blogspotNguyễn Đình Diện8.8stars based on9reviewsChà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...