I want to display a waiting animation while my php page is fetching data from the server

Question

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

Are you using ajax for communicating with the php script ? – Arihant Nahata Apr 23 '11 at 08:12 — Arihant Nahata, Apr 23 '11 at 08:12

score 23 · Accepted Answer · edited May 23 '17 at 12:09

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>

edited May 23 '17 at 12:09

Community

answered Apr 23 '11 at 08:14

Nicky Waites

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 '11 at 09:09
4

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. – Nicky Waites Apr 23 '11 at 09:18
2

Props on the ajaxload.info mention, nifty little site – soulkphp Apr 23 '11 at 09:22

score 10 · Answer 2 · edited Feb 12 '16 at 23:57

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>

2 Answers2