Trang Chủ / Blogger / Tổng hợp một số hiệu ứng chờ tải trang đẹp cho Blogspot
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!
Nguồn:https://www.ntlruby.com/2021/11/tong-hop-mot-so-hieu-ung-cho-tai-trang-dep-cho-blogspot.html
0 Nhận xét