How to show loading spinner in jQuery?

There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.

    .hide()  // Hide it initially
    .ajaxStart(function() {
    .ajaxStop(function() {

The ajaxStart/Stop functions will fire whenever you do any Ajax calls.

Update: As of jQuery 1.8, the documentation states that .ajaxStart/Stop should only be attached to document. This would transform the above snippet to:

var $loading = $('#loadingDiv').hide();
  .ajaxStart(function () {
  .ajaxStop(function () {

Leave a Comment