TỔNG HỢP MỘT SỐ HIỆU ỨNG PRELOAD ĐẸ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 làm hiệu ứng Preload

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.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

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>//<![CDATA[

$(window).on('load',function(){

$('.siben').fadeOut(1000);

})

//]]></script>

Trong đó đường link màu đỏ là đường link ảnh động mà các bạn lựa chọn để sử dụng.

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é.

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='T'> T </span>
    
    <span class='letters-loading' data-text-preloader='R'> R </span>
    
    <span class='letters-loading' data-text-preloader='I'> I </span>
    
    <span class='letters-loading' data-text-preloader='C'> C </span>
    
    <span class='letters-loading' data-text-preloader='K'> K </span>
    
    <span class='letters-loading' data-text-preloader='E'> E </span>
    
    <span class='letters-loading' data-text-preloader='R'> R </span>
    
    <span class='letters-loading' data-text-preloader='C'> C </span>
    
    <span class='letters-loading' data-text-preloader='H'> H </span>
    
    <span class='letters-loading' data-text-preloader='A'> A </span>
    
    <span class='letters-loading' data-text-preloader='N'> N </span>
    
    <span class='letters-loading' data-text-preloader='N'> N </span>

    <span class='letters-loading' data-text-preloader='E'> E </span>

    <span class='letters-loading' data-text-preloader='L'> L </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();

});

}

});

//]]>

</script>

3. Hiệu ứng chờ tải trang - chim bay

Một kiểu hiệu ứng chờ tải trang cũng khá hay

<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)

    });

</script>

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>

</b:if>

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");

  })

</script>

Lời kết

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: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...

Tricker Channel

TỔNG HỢP MỘT SỐ HIỆU ỨNG PRELOAD ĐẸP CHO BLOGSPOT

Cách làm hiệu ứng Preload

1. Hiệu ứng chờ tải trang với ảnh động

2. Hiệu ứng chờ tải trang với "Text"

3. Hiệu ứng chờ tải trang - chim bay

4. Hiệu ứng chờ tải trang - đơn giản

5. Hiệu ứng chờ tải trang - 3 đường kẻ xoay vòng

Lời kết

إرسال تعليق

★ Share 999+ Link Contact Support Facebook | Mới Nhất 2022 ★

Hướng dẫn đăng kí SSL cho website

Hướng Dẫn Unlock 956 Về Bằng Phút | Cân Spam Mới Nhất 2024

Tricker Channel