Implement a loading indicator for a jQuery AJAX call

javascript

ajax

loading-indicator

jquery

byAnton Shumikhin·Jan 24, 2025

The quickest way to add a loading indicator during jQuery AJAX calls is to use the .ajaxStart() method to show and .ajaxStop() method to hide the indicator. Here is a simple example with a CSS spinner:

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

<script>
$(document)
  .ajaxStart(function() { 
    // Stop! AJAX time. Cue the spinner!
    $("#loading").fadeIn();
  })
  .ajaxStop(function() {
    // That’s all, folks! The AJAX circus is leaving town.
    $("#loading").fadeOut();
  });

// Let the magic of AJAX begin!
$.ajax({
  url: "data.php",
  // Rest of your cool AJAX stuff
});
</script>

In essence, this code automatically toggles the loading indicator visibility when AJAX requests kick off or finish.

Indicator design & situational handling

Loading indicator: The beauty and the beast

Visual aesthetics and positioning play vital roles in indicator design. It needs to be noticeable but unobtrusive. Use CSS to create a center-stage fixed position to catch the user's eye.

Keep them in the loop

Consider a progressive indicator such as a Bootstrap progress bar. This increases user engagement and reduces perceived waiting times.

Expect the unexpected: Handling AJAX failures

A loading indicator should disappear even in failed AJAX requests. This ensures a neat UI, regardless of the AJAX call's outcome.

$(document).ajaxComplete(function(event, xhr, settings) {
  // It's show time!
  $("#loading").fadeOut();
}).ajaxError(function(event, xhr, settings, thrownError) {
  // The villain entered the scene!
  $("#loading").hide();
  alert("Something wicked happened: " + thrownError);
});