In this article, I guide you to add beautiful loading effects for blogsptot, before that I also shared many beautiful Preloader effects for blogspot.
With this Preloader effect you can insert the text below as shown above. Looking very professional creates a highlight for customers and readers at first when accessing your website.
The installation steps are as follows:
Step 1: Add CSS before the closing tag </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}}
Step 2: Add HTML under the . tag <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>
Step 3: Add JS before the closing tag</body>
<script>
//<![CDATA[
$(window).on('load', function() {
$('#ctn-preloader').addClass('loaded');
if ($('#ctn-preloader').hasClass('loaded')) {
$('#preloader').delay(900).queue(function() {
$(this).remove();
});
}
});
//]]>
</script>
Article: Beautiful loading effects for blogsptot written by admin of Giaodien.blog
Please leave the source if you reshare this article.
Leaving the source means you respect the author.
Motivation for me to share many good articles.
Post a Comment