Show progress spinner on jQuery AJAX requests

Its right from UI design point of view to show user some kind of progress in case site or application is busy with some internal processing. Especially with AJAX requests, because they take time!

In jQuery its very easy to hook all AJAX requests into one start/stop functions, so there is no need to show and hide progress indicator on each $.ajax request.

I make usage of nice spin.js library, native JavaScript implementation of configurable spinner.

Code below is pretty self-explaning. It uses jQuery ajaxStart and ajaxStop hooks to show and hide spinner. Put this code into external file and just put a link on every page and thats it.

I added ajax_cnt variable when I faced several AJAX requests being called at once, now it counts them and correctly hides the spinner!

1 comment

  1. This is exactly what I was looking for!! The only thing I had to correct are those HTML encondings for gt and lt…
    Thanks a lot.

Leave a Reply

Your email address will not be published.