Animated Page Loading Effect for Blogger

Loading Effect 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.



A live demo can be seen on my blog itself. Just click any link here and you could see the change.

To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just 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/AVvXsEjK93-wJI82K3m3o9_7J5lshEiq3V9UgTEIXdIBaK5cSqw_bFxaEPeX5KnKKZ50eFNFJ5761yzBpFYfcqfsJFUeyLRqe7wEbDka9TUEB2Fk43uHIZ-zgkw4fsztLd8UrgjWkaI_cj8XqVc/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>

After adding this code, save the template.

You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.

62 comments:

  1. not workin!!!!!!!!!!

    ReplyDelete
    Replies
    1. May I have your blog URL please.

      Delete
    2. There was a issue with some of the blogs. The code is now updated and works for all :D

      Delete
  2. Awesome, Thanks for sharing Dhiraj :)

    ReplyDelete
  3. Replies
    1. May I please have your blog URL with the code added so that I can checkout the problem.

      Delete
    2. There was a issue with some of the blogs. The code is now updated and works for all :D

      Delete

  4. nice information.It is helpful.I appreciated your effort.I would like to see more posts like this.thanks

    ReplyDelete
  5. hello, is there any way to open blogger popular posts thumbnails in same window ?

    ReplyDelete
    Replies
    1. By default it opens in the same tab / same window.

      Delete
    2. its not working on my blog (lizzyportal.blogspot.com

      Delete
  6. Thanks for such a nice article.I think animated page loading effect make our blog more interseting.Thanks foe sharing with us

    ReplyDelete
  7. in my blog also it is not working , this is the first time that your widget is not working on my blog : my blog url : http://tkpsoftwares.blogspot.in/

    ReplyDelete
    Replies
    1. Its because jquery plugin is missing add it. :)

      Delete
  8. Very nice plugin mate. Keep sharing

    ReplyDelete
  9. please can you also add the page navigiation (like your page navigation) widget and subscribe to our news letter(like your subscription at ) top widgets.so kindly also add these posts

    ReplyDelete
  10. It is not working on my blog -Freehacktricks3.blogspot.com

    Plz help

    ReplyDelete
  11. It's Working Dude .

    Visit My Blog : http://tkpsoftwares.blogspot.in/

    ReplyDelete
  12. Not Working Plz Help Me !!!!
    URL-http://techdrj.blogspot.in

    ReplyDelete
    Replies
    1. @All Make sure you have the Jquery Plugin there in your blog.

      Delete
  13. Thankx Man It's Working !!!
    Just installed Jquery Library.It's Working now.

    ReplyDelete
  14. worked for few dayz now not working :( :( :( plzz help Dhiraj


    www.123LoveBook.com

    ReplyDelete
  15. Its Not In Center, Check Pls

    http://extra666.blogspot.com/

    ReplyDelete
  16. Nice information.It is helpful.I appreciated your effort.I would like to see more posts like this.thanks

    ReplyDelete
  17. THANK YOU!!!!! IT WORKED. YOU'RE AWESOME.

    ReplyDelete
  18. wow cool, it worked !

    ReplyDelete
  19. Not working in my www.technocrysis.com blog but working in my other blog... Pls help Dhiraj

    ReplyDelete
    Replies
    1. Jquery Plugin must be missing check other comments for help.

      Delete
  20. sir..mine also not working..i already installed SEO Friendly before.

    ReplyDelete
    Replies
    1. Jquery Plugin must be missing check other comments for help.

      Delete
    2. mine also not working..can you be specific where i can solve the Jquery plugin. tq

      Delete
  21. thanks for your tutorial..(y) it works in my blog.

    ifulifu.blogspot.com

    ReplyDelete
  22. Hey Dhiraj
    It`s not working on my blog....
    Blog URL: www.10magictricks.blogspot.com

    ReplyDelete
  23. It's Not Working! I already installed jquery Url - http://www.androidsbestgames.com/

    ReplyDelete
  24. sometimes this loading effect is not working on my blog

    ReplyDelete
  25. I downloaded JQuery but it still doesn't work. Can u please help?
    ryuichis.blogspot.com

    ReplyDelete
    Replies
    1. Sorry but I didn't find the relevant code in your blog.

      Delete
    2. I removed it since it didn't work,
      but I found another tut from youtube and cuz of it, it works! :)
      Thanks for sharing these wonderful features! :)

      Delete
  26. Please Make This As Page Loading Effect - http://jsfiddle.net/pC22x/

    ReplyDelete
  27. WORKING PERFECT BRO NICE POST VERY USEFUL CHECKOUT-MY WEBSITE.
    http://www.atozinfo4all.in

    ReplyDelete
  28. I wanted my Navigation bar to appear during Loading..
    Can u help me out of this ??

    Regards,
    Mohammed Sohail Amer

    www.techikot.blogspot.com

    ReplyDelete
  29. Hello Admin This Code Not Working On My Blog,
    Please Help Me And Solve This Problem...

    http://www.mobiletrick.in

    ReplyDelete
  30. it works perfect on my blog but how can i hide the scrollbar while this effect is running? Thanks

    ReplyDelete
  31. Wow it works and is very cool!
    Thank you very much, http://www.idealgamer.com

    ReplyDelete
  32. sir how to add jquery in blogger ???

    ReplyDelete
  33. hey its not working on my blog too can you help me??
    blog url: http://theartictern.blogspot.com.ng/

    ReplyDelete
  34. Where is the body Option plz give ss of it Thanks sir

    ReplyDelete
  35. Not working on my blog page.. can you have a look??
    www.kaashvii.com

    ReplyDelete
  36. Thank you so much for this Post.
    Change gif image to any.

    ReplyDelete
  37. its shows like a loop gif.. but i just need to show loading depending on page loading... like in many site the loading message/animation shows depending upan page loading like.. 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%..
    can you please help me

    ReplyDelete