Show loading icon until table has loaded

Question

I have some javascript/jQuery that loads a table on the click of a search button and does not do a page load. Usually when I want to show a loading icon, I would dismiss it once the page has loaded... But there is no page load on this. The user could be on the page for 5 minutes before they search and when they click the search button, the loading icon would appear and once the table has loaded their results, it would dismiss...

Can anyone point me in the right direction to achieve this?

most likely you are doing ajax call to get the data from server, so show a loading section before making the ajax call and once data has been loaded in your table hide that section — Ranjit Singh

Jenson M John Jenson M John · Accepted Answer · 2016-05-26T13:35:58

Place a Loading text/image in a div.

<div id="loading" style="display: none;">Loading..</div>

Control the appearance of above div With jQuery ajaxStart & ajaxStop methods.

$(document).ajaxStart(function(){
  $("#loading").show();
}).ajaxStop(function() {
  $("#loading").hide();
});

The above method triggers whenever there is an active AJAX call.

Show loading icon until table has loaded

1 Answers