How to Install Cool Preloader Animation Effects on Blogger - hyderabadrichest

How to Install Cool Preloader Animation Effects on Blogger

How to Install Cool Preloader Animation Effects on Blogger

At this time we will provide a tutorial on how to install a cool and responsive preloader animation on your blog, but before that, what is the use of the preloader for your blog?

Preloader is a simple feature in loading a page to give the server delay time to respond to data from a page.

Not only that, the preloader is also widely used as an animation to beautify your blog. well, no need to linger anymore, here's how to install a cool preloader animation on blogger. Note: this method works if your template already uses JQuery Ajax in your template, for example is the code below:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

If your blog template hasn't installed the code, please add it above </head> or & lt; / head & gt; , if already there, just skip this stage. Next steps:

1. Sign in Blogger Buddy
2. Themes> Edit Themes
3. Then Search for Code </head>  or & lt; / head & gt; and paste the code below right above the code:
 <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:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>

4. Then Search for the Code or <body> & lt; body & gt; then paste the code below just below the code:
 <div id='preloader'>  
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>

5. Then Search again for the Code </body> or  & lt; / body & gt; and paste the code below right above the code:
 <script type='text/javascript'>  
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

6. Save your template.

See the Pen Preloader by Ade Irawan (@ade-irawan) on CodePen.

How beautiful isn't it?, Thank you for visiting our site, hopefully it can be of benefit to all of you, then don't forget if you like this article, please share it with your social media to build this site so you can provide other more interesting information. greetings hyderabadrichest.in
Show Comments
Hide Comments

0 Response to "How to Install Cool Preloader Animation Effects on Blogger"

Post a comment

Top Ad Articles

Top Ad Articles

Top Ad Articles 2

Advertise Articles