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

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?

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>

Related