How to Add Awesome Fading Loading Effect in Blogger

Well recently I added an effect on my blog that used to fade and show a Ajax loader image as soon as someone clicks on any post link. So this effect looks cool and also removes the waiting time problem when visitors has a slow connection. Well now by waiting time it will not actually make your blog fast (I think it will effect the loading time) but when visitors click on any post link he will see this loading effect which will make him believe that the post is just loading and it will popup any time soon. So now if you are still thinking about what kind effect I am talking about just try to click on any post link and you will see the grey background fade in with that Ajax loader .gif file. So now if you think this effect looks awesome well just add this effect to your blog too and enjoy. [Demo] so you saw this awesome effect right.

So now let me remind you its just a work of CSS and JavaScript, so you are not really adding a loader to your site but it’s a visual widget that gets loaded when we command it too, and it might even increase your blogs loading time as it’s a script based work, so if you are already using enough JavaScript files then do not add this widget else it works fine just give it a try.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for ]]></b:skin> tag and paste below code above it.

   #page-loader{background:#F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBu3yGsalnIICUEasVhl-qkpkdLMEiR2movYxLmBS5TAoOWcKa0tz39wPxA0p1panzfhB8q4vEkAmWgvzub9jf4qPX6tAZOuU1lvYfjYfeuX3qpKpDWPyosxEdkxSdzMVHdkDMg54BECut/s1600/spinner.gif) no-repeat 50% 50%;bottom:0;color:#FFF;display:none;left:0;padding:1em 1.2em;position:fixed!important;right:0;top:0;z-index:99999}

3. Now again search for </body> tag and paste below code above it.

   <script type='text/javascript'>$(function(){$(document.body).append("<div id='page-loader'></div>");$(window).on("beforeunload",function (){$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});});</script>

4. That’s it now your codes are placed just hit Save Template button and refresh your blog, now click any of your posts and see this awesome loading effect. Do like this post below if you love this tutorial and do share this tut with all your friends.