Hiệu ứng loading đẹp cho blogsptot

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Bài viết này mình hướng dẫn các bạn thêm Hiệu ứng loading đẹp cho blogsptot, trước đó mình cũng chia sẻ nhiều kiểu hiệu ứng Preloader đẹ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.

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>

Bài viết: Hiệu ứng loading đẹp cho blogsptot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.