Thursday, March 10, 2011

how to add ajax page loading effect to blogger

how about giving a shocking effect to your visitors.Here’s a example to make your web page content display a ajax page loading effect to blogger.You can see the effect in action on my pages and here is one. another blogger example
how to add ajax page loading effect to blogger

Add the latest jquery library to your head section by going to edit html in designer of blogger.

Add the following code just below the <body> tag 
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div> 

Then go to your template designer and then to add css section add the following code
#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
 background: #3c5a76 url(http://dl.dropbox.com/u/13256471/fuzionpro/109.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
.v2 #loading { display: none; }

#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #7fb061;
    opacity: 0.8;
    width: 0;
    height: 18px;
#loader {
 background: url(http://dl.dropbox.com/u/13256471/fuzionpro/fuzionpro.png) no-repeat center 25%;
 height: 100%;
 display: block;

.v2 property is the class attribute in html tag this is key of the effect

Then the magic using jquery add this script to the head section



$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });


    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });



  1. how to dispayed it only on homepage?

  2. hi fuzionpro.. i try this plugin on another blog

    it no working :( i really need this plugin.. hmm i hope you will replay soon

  3. to display this only in homepage add the code below for the step 2

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>

  4. sorry for the late reply.....

    it should work properly....try this things

    1.change the background url images loaction to yours in step 3

    2.make sure you have these id properties header and footer

    3.did you add the jquery library

  5. hi rajesh... oh im sorry. i do not know how to add jquery library :??

    How ya?

  6. woahh! it working. thank rajesh.

  7. hi ! Rajesh, how to make more slower? emm.. set the time etc etc?

  8. you can play around with the numbers in the .animate function (step4)

  9. hello.. it is not working for blogspot..
    can you explain this step by step?

  10. mine is a blogspot and its working fine

  11. I mean..
    when I put the script as instructed above,the blog only keep loading and loading..
    It does not show the content of the blog..

    How can I resolve this?

  12. ok try this put the script in step 4 in a js file and call it in the head section like this
    <script src='http://dl.dropbox.com/u/13256471/js.js' type='text/javascript'></script>

  13. Sorry.. but it also not working..
    I have put the script above /HEAD
    and it is not working..

  14. In my page there is no head tag.. what can i do?

  15. its no way that your site couldn't have a head tag plz check it again

  16. when I put the script as instructed above,the blog only keep loading and loading..
    It does not show the content of the blog..
    ME TOO!

  17. i works fine for my site .....if its not working means you couldn't have seen this page

  18. thank you very much
    my blog is http://adepters.blogspot.com/

  19. Hi, I really like your "loading effect" and I would like to put it in my blog but, I can´t make it work.
    Would you be so kind to explain it like it is for a 6 years old who doesn´t know any html.

    I know a little bit, but I don´t know what "jquery" is (it appears in my template) or what add css section is.

  20. add the code in step 3 just above the following code (edit html in blogger dashboard)

  21. Hi, thanks for your answer. But, I keep trying and trying and it doesn´t work out for me.

    Would it be posible that some part of the code is wrong?

    I have tried in other blog and it didn´t work out either
    Thank you anyway!!!

  22. sorry for my mistake i just missed a open braces in the code in step4...........i updated it......now it works great..........

  23. Can u help me pls?
    This is my mail jokes_fm@yahoo.com ...it's not working

  24. Thanks Bro!
    CHECKOUT http://www.anandvip.com
    worked like a breeze

  25. how to do it in my blog http://movietrees.blogspot.com/

  26. try this one Also and here you can find more help regarding your question
    Easy loading bar & logo effects with jQuery

  27. It's Great effect Rajesh!
    I use it with my web now without any problem.
    I just want to understand how this code is working, especially the css code:
    .v2 #loading { display: none; }
    what is the benefit of the .v2 ?
    and the jQuery:

    Thanks Rajesh you helped me a lot with this post.

  28. please tell me wat is .v2 property

  29. v2 that is code taken from :
    <html b:version='2' class='v2'
    It's code blogger template (Edit HTML) on the 3rd line

  30. Ok guys here's where you all are doing it wrong.

    Add the script after the jQuery library cause without the library file loaded the script is useless.

  31. Amazing man....i was looking for this for my new android app...thx man

  32. Really no matter if someone doesn’t be aware of afterward its up to other viewers that they will assist, so here it takes place.
    website design


fuzionpro Headline