Tạo hiệu ứng loading đẹp cho blogspot

Hướng dẫn các bạn thêm Tạo hiệu ứng loading đẹp cho blogspot. Với hiệu ứng Preloader này bạn có thể chèn thêm đoạn text phía dưới như hình trên. Nhìn rất là chuyên nghiệp tạo điểm nhấn cho khách hàng, độc giả ngay đầu tiên khi truy cập trang web của bạn.

Tạo hiệu ứng loading đẹp cho blogspot

Các bước cài đặt như sau:

Bước 1: Thêm CSS trước thẻ đóng </b:skin>

.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:9000}

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

Bước 2: Thêm HTML dưới thẻ <body>

<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='G'> G </span>

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

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

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

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

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

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

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

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

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

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

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

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

</div>

<p class='text-center'>Loading</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>

Bước 3: Thêm JS trước thẻ đóng </body>

<script>

//<![CDATA[

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

$('#ctn-preloader').addClass('loaded');

if ($('#ctn-preloader').hasClass('loaded')) {

$('#preloader').delay(900).queue(function() {

$(this).remove();

});

}

});

//]]>

</script>

Kết luận

Chỉ vài bước đơn giản là bạn có thể Tạo hiệu ứng loading đẹp cho blogsptot rồi. Nếu có gì thắc mắc các bạn để lại dưới phần bình luận nhé. Chúc các bạn thành công!