How to Add a Preloading Effect on Blogger

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>

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>

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

DEMO

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>

DEMO

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.

9 comments for "How to Add a Preloading Effect on Blogger"

Ph. BENYAHIA AdelFebruary 09, 2019
my blog dont load after installing this scripte just a cerculing gif!!!
AdminMarch 07, 2020
This comment has been removed by the author.
Ohazuruike JoshuaJune 11, 2020
Thanks so much just what i wanted.

If you need a sport betting prediction tips and also sport news.

CLick here now - https://www.9jacentral.com.ng
9jacentralJune 11, 2020
Thanks so much just what i wanted.

If you need a sport betting prediction tips and also sport news
LyricsAcademyAugust 26, 2020
Thank you so much
Nice post thanks a lot for this information
Independence day speech in english
AnonymousMarch 25, 2022
How To Add A Preloading Effect On Blogger - Khalistablog >>>>> Download Now

>>>>> 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
welcome our cheap carMay 22, 2022

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