Tổng hợp một số hiệu ứng chờ tải trang đẹp cho Blogspot - NTLRUBY -->
Tổng hợp một số hiệu ứng chờ tải trang đẹp cho Blogspot Tổng hợp một số hiệu ứng chờ tải trang đẹp cho Blogspot
  • 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.

    Thủ thuật blogspot

       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.

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

          + 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"

    Thủ thuật Blogspot

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

    });

    }

    });

    //]]>

    </script>

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

    Thủ thuật Blogger
       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

    Thủ thuật blogspot

    <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

    Thủ thuật blogger

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

       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!


  • Bài Viết Liên Quan

    Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

    Google

    Zalo

    Không có nhận xét nào :

    Đăng nhận xét

    Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!