Animated page loading effect for blogger

Animation is great way to design your website/blog with almost no effect on your blog loading speed. There are lots of animations are currently using by the web developer to create great visual effect for visitors. So, every blogger wants to design blog that look great among his competetiors blogs. Therefore every blogger try to design his blog uniquely. The widget in this post I am going tto share will make your blog design even more awesome.

The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the visitors will click any link to leave the current page, inspite of the old boring loading it will have animation.

Demo This Widget

Steps to add this widget in Blogger

First login to your Blogger Dashboard and navigate to Template → backup your template→ click edit HTML →. Press Ctrl+F to find </body>

Now Paste the below Script code just above/before the </body>.

HTML

<style>
#Blogging-Bee {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheieTgdarCHsFelqSJgfFaJb1x0YNxWr6UDi1c9elOJY_jpe1rOJuwRrqnP4JEFe9LriA1B_F8-7ZJOCNACFU_beirmu4KDAvyIjG43fDT7CZHOnLJ9V5K_WDomUnKcom2m5ES_JSB8lc/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="Blogging-Bee">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#Blogging-Bee').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Save Your Template and see it live on your blog.

Configuration/Settings

You can change the loading image with your own. To do so..
change the image link with your own. in CSS highlighted with green background.
Below is the list of Ajax loading genrator. If you want to change loading GIF image with your own image then Kindly visit below websites.

http://www.ajaxload.info/
http://loadergenerator.com/
http://www.loadinfo.net/
http://www.chimply.com/Generator
http://www.webscriptlab.com/index.php

Enjoy!...