loading...

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




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

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

Step3
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;
}

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

Step4
Then the magic using jquery add this script to the head section
<script>

(function($){

$("html").removeClass("v2"); 


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


$(window).load(function(){

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

});
})(jQuery);
</script>

36 comments:

  1. how to dispayed it only on homepage?

    ReplyDelete
  2. hi fuzionpro.. i try this plugin on another blog
    http://6tech.blogspot.com/

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

    ReplyDelete
  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>
    </b:if>

    ReplyDelete
  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

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

    How ya?

    ReplyDelete
  6. woahh! it working. thank rajesh.

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

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

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

    ReplyDelete
  10. mine is a blogspot and its working fine

    ReplyDelete
  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?

    ReplyDelete
  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>

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

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

    ReplyDelete
  15. 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!

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

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

    ReplyDelete
  18. 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.

    ReplyDelete
  19. add the code in step 3 just above the following code (edit html in blogger dashboard)
    ]]>
    </b:template-skin>

    ReplyDelete
  20. 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!!!

    ReplyDelete
    Replies
    1. Did you add library? Insert this code right below head tag

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

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

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

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

    ReplyDelete
  25. try this one Also and here you can find more help regarding your question
    Easy loading bar & logo effects with jQuery
    http://workwithphp.info/?p=38

    ReplyDelete
  26. 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:
    $("html").removeClass("v2");

    Thanks Rajesh you helped me a lot with this post.

    ReplyDelete
  27. please tell me wat is .v2 property

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

    ReplyDelete
  29. 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.

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

    ReplyDelete
  31. 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

    ReplyDelete

fuzionpro Headline

fuzionpro