12

I need to display a waiting animation while my php page is fetching data from the server...how can that be done?

1
  • Are you using ajax for communicating with the php script ? Apr 23, 2011 at 8:12

2 Answers 2

23

If you are using jQuery Ajax then you can do something like this

 $("#loading").ajaxStart(function () {
    $(this).show();
 });

 $("#loading").ajaxStop(function () {
   $(this).hide();
 });

html

<div id="loading" style="display:none;">
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Loading" />
</div>

Grab your image from http://www.ajaxload.info/

Also see duplicate here - How to show loading spinner in jQuery?

3
  • 7
    Can we please stop the jQuery by default answers. jQuery is not JavaScript, not is it standard. It's better to be more general IMO, than to force a particular library. Similarly, if you mentioned mootools, dojo, or prototype it would be the same issue, sometimes simplest is best.
    – asnyder
    Apr 23, 2011 at 9:09
  • 7
    Well since he tagged his question as jQuery I think a jQuery solution is acceptable but if you want to provide an alternative go for it. Anyway until Raviraja comes back and answers Arihant's question this is just one example that may or may not work depending on what Rav is doing. Apr 23, 2011 at 9:18
  • 2
    Props on the ajaxload.info mention, nifty little site
    – soulkphp
    Apr 23, 2011 at 9:22
10

Assuming you have container div at your page to show contents.

So by default, show a loading animation image in it, like the following :

<div id="container" >
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Searching" />
</div>

As query fetching process completes and your Html to content is ready :

Replace div and inner HTML with page content.

<div id="container" >
   Replace image with Page content after fetching data...
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.