How to Add a Preloading Effect on Blogger - This time I will share a tip so that your blog can become more interesting. To make your blog more interesting there are actually a lot of ways, one of which I will discuss this time is by adding a Preloading Effect on Blogger.
The workings of the Preloading Effect on Blogger are transitions that will appear automatically when loading a page on the blog and will disappear after the page is loaded fully. The Preloading effect that I will share will not affect the speed of the blog because it is very light pure CSS and SVG without images. The following tips on How to Install the Preloading Effect.
How to Add a Preloading Effect on Blogger
1. Go to Blogger >> choose Theme >> click the Edit HTML button
2. Then add the code below just before the code </body> or <!--</body>--></body>
jQuery
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
3. Then, add the code below after the code <body>
HTML
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>
4. Next, add this CSS code before the code </head> or </head><!--<head/>-->
CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>
5. Then click the Save theme button and see the results
Preloading Effect with Animation
And here I have also provided several HTML and CSS options for preloading animation effects that you can adjust to your needs. To install it, it's the same as the steps I have already stated above, only the code that uses the code below.
HTML
<div id='preloader'>
<div id='container' class='spinner'>
<div id='dot'></div>
<div class='step' id='s1'></div>
<div class='step' id='s2'></div>
<div class='step' id='s3'></div>
</div>
</div>
CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>
Thus tips for beautifying your blog to make it more interesting by installing the Preloading Effect on Blogger. Hopefully with these brief tips, it can be useful for you. Good luck.
my blog dont load after installing this scripte just a cerculing gif!!!
ReplyDeleteSAME ON MINE
DeleteHow To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download Now
Delete>>>>> Download Full
How To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download LINK
>>>>> Download Now
How To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download Full
>>>>> Download LINK DI
This comment has been removed by the author.
ReplyDeleteThanks so much just what i wanted.
ReplyDeleteIf you need a sport betting prediction tips and also sport news.
CLick here now - https://www.9jacentral.com.ng
Thanks so much just what i wanted.
ReplyDeleteIf you need a sport betting prediction tips and also sport news
Thank you so much
ReplyDeleteNice post thanks a lot for this information
Independence day speech in english
Very nice...I am very happy to see this post because it is very useful for me because there is so much information in it. I always like to read quality and I'm happy that I got this thing in your post. Thanks for sharing the best article post. Click this comment
ReplyDeleteHow To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download Now
ReplyDelete>>>>> Download Full
How To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download LINK
>>>>> Download Now
How To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download Full
>>>>> Download LINK
ReplyDeletemy store this is high and cheap price product sell. Welcome to the World of Realistic Sex Dolls.very good product for my store YOKIDOLL specializes in high-quality real life sex doll、male sex dolls with distinguished tastes. Our Real Sex Doll each has a personal character to fulfill your deepest desires.
full size adult doll：lifelike sex dolls 、mini sex doll、life size sex doll .courier for free！
than yokidoll product men specipice product is very high quality
thats product high image and high quality product sell frist sell best offer my website
sex doll, our store is the best product. smart product my store dolls
https://yokidolls.com/