I need to display a waiting animation while my php page is fetching data from the server...how can that be done?
2 Answers
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?
-
7Can 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.– asnyderApr 23, 2011 at 9:09
-
7Well 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
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>