Hiệu ứng chờ tải trang hay còn gọi là hiệu ứng loading. Khi người dùng truy cập Blog hay Website thay vì họ nhìn thấy trang tải từng phần của trang thì họ sẽ thấy hiệu ứng chờ tải trang mà các bạn cài đặt. Sau khi trang của các bạn được tải hoàn tất thì hiệu ứng sẽ nhẹ nhàng biết mất. Điều này giúp Blog (Website) của các bạn trở nên chuyên nghiệp hơn.
Bài này mình chia sẻ với các bạn một số hiệu ứng chờ tải trang (hiệu ứng loading) đẹp cho Blogspot
Cách thực hiện đơn giản, các bạn chỉ việc vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML sau đó copy và dán toàn bộ phần code mình chọn rồi vào sau thẻ <body>. Lưu lại là xong.
Lưu ý: Trước khi thực hiện, các bạn kiểm tra xem Template của mình đã có thư viện jquery.min chưa. Nếu chưa có thì thêm nó vào chung luôn.
1: Hiệu ứng chờ tải trang với ảnh động
Cách này mình thấy rất hay bởi hiệu ứng hoạt động là ảnh đông (ảnh gif). Vì thế các bạn hoàn toàn có thể tạo ra hiệu ứng chờ tải trang đẹp mắt hoặc theo kiểu ấn tượng, độc đáo cho riêng mình.
<style type='text/css'>
.siben {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background:
url('https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif') center
no-repeat #fff;
}
</style>
<div class='siben'></div>
<script>//<
+ Các bạn có thể lấy link những ảnh trên để sử dụng hoặc truy cập vào đây tìm cho mình ảnh động ưng ý nhất để tạo hiệu ứng chờ tải trang thật đẹp. (Lưu ý: Nếu bạn nào chọn ảnh có nền không phải màu trắng thì nhớ chỉnh lại mã màu #fff mình cũng tô đỏ sau link ảnh cho phù hợp nhé.)
+ Ngoài ra các bạn cũng có thể truy cập vào đây để tìm hiểu cách tự tạo ảnh động độc quyền cho riêng cho Blog của các bạn (ví dụ như logo Blog của mình cũng có thể sử dụng làm hiệu hứng chờ tải trang đấy 😊).
2: Hiệu ứng chờ tải trang với "Text"
Một kiểu hiệu ứng chờ tải trang rất chuyên nghiệp và độc đáo với "Text". Nó sẽ tạo điểm nhấn ấn tượng cho người dùng của các bạn.
<style type='text/css'>
.text-center{text-align:center!important}
.item-col{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.row-item-col{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.ctn-preloader{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:none;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;left:0;top:0;width:100%;z-index:9000000}
.ctn-preloader
.animation-preloader{position:absolute;z-index:1000}
.ctn-preloader .animation-preloader
.spinner{-webkit-animation:spinner 1s infinite linear;animation:spinner 1s
infinite linear;border-radius:50%;border:3px solid
rgba(0,0,0,0.2);border-top-color:#000000;height:9em;margin:0 auto 3.5em
auto;width:9em}
.ctn-preloader .animation-preloader .txt-loading{font:bold
5em
"Poppins",sans-serif;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading{color:rgba(0,0,0,0.2);position:relative}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:before{-webkit-animation:letters-loading 4s
infinite;animation:letters-loading 4s infinite;color:#000000;content:attr(data-text-preloader);left:0;opacity:0;font-family:"Poppins",sans-serif;position:absolute;top:-3px;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(2):before{-webkit-animation-delay:0.2s;animation-delay:0.2s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(3):before{-webkit-animation-delay:0.4s;animation-delay:0.4s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(4):before{-webkit-animation-delay:0.6s;animation-delay:0.6s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(5):before{-webkit-animation-delay:0.8s;animation-delay:0.8s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(6):before{-webkit-animation-delay:1s;animation-delay:1s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(7):before{-webkit-animation-delay:1.2s;animation-delay:1.2s}
.ctn-preloader .animation-preloader .txt-loading
.letters-loading:nth-child(8):before{-webkit-animation-delay:1.4s;animation-delay:1.4s}
.ctn-preloader.dark .animation-preloader
.spinner{border-color:rgba(255,255,255,0.2);border-top-color:#fff}
.ctn-preloader.dark .animation-preloader .txt-loading
.letters-loading{color:rgba(255,255,255,0.2)}
.ctn-preloader.dark .animation-preloader .txt-loading
.letters-loading:before{color:#fff}
.ctn-preloader
p{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:8px;color:#3b3b3b}
.ctn-preloader
.loader-preloader{position:fixed;top:0;left:0;width:100%;height:100%;font-size:0;z-index:1;pointer-events:none}
.ctn-preloader .loader-preloader .row-item-col{height:100%}
.ctn-preloader .loader-preloader .loader-section{padding:0}
.ctn-preloader .loader-preloader .loader-section
.bg{background-color:#ffffff;height:100%;left:0;width:100%;-webkit-transition:all
800ms cubic-bezier(0.77,0,0.175,1);-o-transition:all 800ms
cubic-bezier(0.77,0,0.175,1);transition:all 800ms cubic-bezier(0.77,0,0.175,1)}
.ctn-preloader .loader-preloader.dark_bg .loader-section
.bg{background:#111339}
.ctn-preloader.loaded
.animation-preloader{opacity:0;-webkit-transition:0.3s
ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out}
.ctn-preloader.loaded .loader-section
.bg{width:0;-webkit-transition:0.7s 0.3s allcubic-bezier(0.1,0.1,0.1,1);-o-transition:0.7s
0.3s allcubic-bezier(0.1,0.1,0.1,1);transition:0.7s 0.3s
allcubic-bezier(0.1,0.1,0.1,1)}
@-webkit-keyframes
spinner{to{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}
@keyframes spinner{to{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}
@-webkit-keyframes
letters-loading{0%,75%,100%{opacity:0;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}25%,50%{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}
@keyframes letters-loading{0%,75%,100%{opacity:0;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}25%,50%{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}
@media screen and (max-width:767px){.ctn-preloader
.animation-preloader .spinner{height:8em;width:8em}.ctn-preloader
.animation-preloader .txt-loading{font:bold 3.5em
"Poppins",sans-serif}}
@media screen and (max-width:500px){.ctn-preloader
.animation-preloader .spinner{height:7em;width:7em}.ctn-preloader
.animation-preloader .txt-loading{font:bold 2em "Poppins",sans-serif}}
</style>
<div id='preloader'>
<div class='ctn-preloader' id='ctn-preloader'>
<div class='animation-preloader'>
<div class='spinner'></div>
<div class='txt-loading'>
<span class='letters-loading' data-text-preloader='N'>
N </span>
<span class='letters-loading' data-text-preloader='T'>
T </span>
<span class='letters-loading' data-text-preloader='L'>
L </span>
<span class='letters-loading' data-text-preloader='R'>
R </span>
<span class='letters-loading' data-text-preloader='U'>
U </span>
<span class='letters-loading' data-text-preloader='B'>
B </span>
<span class='letters-loading' data-text-preloader='Y'>
Y </span>
<span class='letters-loading' data-text-preloader='.'>
. </span>
<span class='letters-loading' data-text-preloader='C'>
C </span>
<span class='letters-loading' data-text-preloader='O'>
O </span>
<span class='letters-loading' data-text-preloader='M'>
M </span>
</div>
<p class='text-center'>Loading...<br />Vui lòng
chờ trong giây lát!</p>
</div>
<div class='loader-preloader'>
<div class='row-item-col'>
<div class='item-col loader-section section-left'>
<div class='bg'></div>
</div>
<div class='item-col loader-section section-left'>
<div class='bg'></div>
</div>
<div class='item-col loader-section section-right'>
<div class='bg'></div>
</div>
<div class='item-col loader-section section-right'>
<div class='bg'></div>
</div>
</div>
</div>
</div>
</div>
<script>
//<![CDATA[
$(window).on('load', function() {
$('#ctn-preloader').addClass('loaded');
if ($('#ctn-preloader').hasClass('loaded')) {
$('#preloader').delay(900).queue(function() {
$(this).remove();
});
}
});
//]]>
3: Hiệu ứng chờ tải trang - chim bay
<style>
.loadd {position:
fixed;background: #6944ff;z-index: 1000000;top: 0;left: 0;width: 100%;height:
100vh}
.body {position:
absolute;top: 50%;margin-left: -50px;left: 50%;animation: speeder .4s linear
infinite}
.body > span
{height: 5px;width: 35px;background: #fff;position: absolute;top: -19px;left:
60px;border-radius: 2px 10px 1px 0}
.base span
{position: absolute;width: 0;height: 0;border-top: 6px solid
transparent;border-right: 100px solid #fff;border-bottom: 6px solid
transparent}
.base span:before
{content: "";height: 22px;width: 22px;border-radius: 50%;background:
#fff;position: absolute;right: -110px;top: -16px}
.base span:after
{content: "";position: absolute;width: 0;height: 0;border-top: 0
solid transparent;border-right: 55px solid #fff;border-bottom: 16px solid transparent;top:
-16px;right: -98px}
.face {position:
absolute;height: 12px;width: 20px;background: #fff;border-radius: 20px 20px 0
0;transform: rotate(-40deg);right: -125px;top: -15px}
.face:after
{content: "";height: 12px;width: 12px;background: #fff;right:
4px;top: 7px;position: absolute;transform: rotate(40deg);transform-origin: 50%
50%;border-radius: 0 0 0 2px}
.body > span
> span:nth-child(1),
.body > span
> span:nth-child(2),
.body > span
> span:nth-child(3),
.body > span
> span:nth-child(4) {width: 30px;height: 1px;background: #fff;position:
absolute;animation: fazer1 .2s linear infinite}
.body > span
> span:nth-child(2) {top: 3px;animation: fazer2 .4s linear infinite}
.body > span
> span:nth-child(3) {top: 1px;animation: fazer3 .4s linear
infinite;animation-delay: -1s}
.body > span
> span:nth-child(4) {top: 4px;animation: fazer4 1s linear
infinite;animation-delay: -1s}
@keyframes fazer1
{0% {left: 0} 100% {left: -80px;opacity: 0}}
@keyframes fazer2
{0% {left: 0} 100% {left: -100px;opacity: 0 }}
@keyframes fazer3
{0% {left: 0} 100% {left: -50px;opacity: 0}}
@keyframes fazer4
{0% {left: 0} 100% {left: -150px;opacity: 0}}
@keyframes speeder
{0% {transform: translate(2px, 1px) rotate(0deg)} 10% {transform:
translate(-1px, -3px) rotate(-1deg)} 20% {transform: translate(-2px, 0px)
rotate(1deg)} 30% {transform: translate(1px, 2px) rotate(0deg)} 40% {transform:
translate(1px, -1px) rotate(1deg)} 50% {transform: translate(-1px, 3px)
rotate(-1deg)} 60% {transform: translate(-1px, 1px) rotate(0deg)} 70%
{transform: translate(3px, 1px) rotate(-1deg)} 80% {transform: translate(-2px,
-1px) rotate(1deg)} 90% {transform: translate(2px, 1px) rotate(0deg)} 100%
{transform: translate(1px, -2px) rotate(-1deg)}}
.longfazers
{position: absolute;width: 100%;height: 100%}
.longfazers span
{position: absolute;height: 2px;width: 20%;background: #fff}
.longfazers
span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}
.longfazers
span:nth-child(2){top:40%;animation:lf2 .8s linear
infinite;animation-delay:-1s}
.longfazers
span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}
.longfazers
span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}
@keyframes
lf{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes
lf2{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes
lf3{0%{left:200%}100%{left:-100%;opacity:0}}
@keyframes
lf4{0%{left:200%}100%{left:-100%;opacity:0}}
</style>
<div class='loadd'>
<div
class='body'>
<span></span>
<span></span>
<span></span>
<span></span>
<div
class='base'>
<span></span>
<div
class='face'></div>
</div>
</div>
<div
class='longfazers'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".loadd").fadeOut("slow");
}, 500)
});
4: Hiệu ứng chờ tải trang - đơn giản
<style>
#tgb-loader{position:fixed;z-index:99999999;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:#0084ff}
.no-js #tgb-loader,.oldie #tgb-loader{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}}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(window).bind("load", function () {
jQuery("#loader").fadeOut("slow");
jQuery("#tgb-loader").delay(0).fadeOut();
});
/*]]>*/
</script>
<b:if cond='data:blog.pageType == "index"'>
<div id='tgb-loader'>
<div id='loader'>
<span class='loader'><span
class='loader-inner'></span></span>
</div>
</div>
5: Hiệu ứng chờ tải trang - 3 đường kẻ xoay vòng
<style>
.body__preloader{position:fixed;z-index:9999999;width:100%;height:100%;left:0;top:0;background-color:#ffffff;-webkit-transition:all
.3s ease;-o-transition:all .3s ease;transition:all .3s
ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;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}
#loading: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}
#loading: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}
@-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)}}
</style>
<div class='body__preloader'>
<div
id="loading"></div>
</div>
<script>
$(window).bind("load", function() {
$('.body__preloader').addClass("loaded");
})
Như vậy là mình đã chia sẻ với các bạn 5 cách tạo hiệu ứng chờ tải trang đẹp cho Blogspot mà mình sưu tầm được. Trong đó mình thích nhất là số 1 và số 2, vì:
- Số 1 thì có thể tùy thích sử dụng đa dạng với ảnh động.
- Số 2 thì rất hay và độc đáo.
Còn các bạn thì sao?
Chúc các bạn thành công!
Facebook