#176 Animated Page Loading Effect for Blogger

Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog.

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.

Add the HTML and Script

Go to Template---->Edit HTML , then place this code above </body>


<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafd1J_0QgMKGBVenhDlR-EXAmntg-6CNcKVnJOVMiBa1kTULhCmG0aMU6i46IkDklu61EAWK1_5DVkwponaUhB_9r32juKIGI0ZJWHrtrJQzJJjUkP0FSODe4wy2dVgWXEXaQEA6X14k/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="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>