How to Show Loading Spinner in jQuery

Almost every website and application uses a loading spinner to tell users that there is some processing happening in the background. It makes user experience intuitive and sets user expectations, especially for long running tasks. This is mostly required in case AJAX function calls where processing happens in background. But often software developers don’t know how to show loading spinner on their websites, to indicate that it is working on a task and that user should wait until it is completed. You can easily do this using jQuery. In this article, we will learn how to show loading spinner in jQuery.

How to Show Loading Spinner in jQuery

Here are the steps to show loading spinner in jQuery.

1. Create Loading Div

First, you need to create an HTML div with an image of loading spinner in it. You can easily download a loading spinner image online, but make sure the file size is small so that it is rendered quickly. This image is generally a gif file since it is an animation and needs to be downloaded to your web server, not your local machine

Then add the following code to your HTML web page.

<div id='loader'><img src='/images/loader.gif'/></div>

You change the src attribute of img tag based on the location of your loading spinner image. Use a relative path to your loading spinner, not its local file path.

2. Setup jQuery

Next, you need to setup jQuery code to hide the above div by default, and display it whenever an AJAX call is made from your page, and hide it again once the AJAX call has completed. Here is a simple code snippet to do the same.

$('#loader')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

In the above code, we have attached ajaxStart() and ajaxStop() event handlers to the div containing loading spinners. If you are using jQuery 1.8+, you may need to attach the event handlers to document.

var $loading = $('#loader').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

You can customize how you want to display the loading div. Some use it as a modal, some display it in a splash screen. Nevertheless, you need to keep the div hidden initially, show it when the AJAX call is made it and hide it again after the call completes.

Please make sure you use the right path to your loading spinner image else the img tag will render a broken image when the div is displayed. Also, instead of using jQuery to hide the div initially, you may use inline CSS instead.

In this article, we have learnt how to show loading spinner in your web page. You can use this for your websites and applications, as per your requirement.

How to Show Loading Spinner in jQuery