Dave Noderer's Blog

November 2014 Entries

Javascript Loading gif and logic

When using ajax to load data from the server it is useful to display a “loading” animation to let the user know that something is happening.

These bits of code and this gif spinner will do the trick!

ajax-loader  you can find a number of alternative spinners or make your own!

Position the following div wherever you want it on your page.

Then in javascript turn it on when loading the page and  when re-fetching data (say after filtering):

$("#loading").css({ 'visibility': 'visible' });

Then turn it off on either successful return or data or an error:

$("#loading").css({ 'visibility': 'hidden' });