jQuery AJAX progress indicator plugin

1 minute read

Some of my latest projects rely heavily on jQuery’s AJAX method to perform AJAX requests against the server-side code. I wanted my projects to be mobile-friendly and this meant that I had to take into account intermittent drops in the internet connection as well as temporary slow downs in speed when making my AJAX calls. I decided to display a “loading” progress indicator to the user for every critical AJAX request which I needed to make so that in case there was a delay in receiving a response from the server at least the user would know what was going on (you can see this concept in action on WuPlay).

I decided to write a jQuery plugin which extends the $.ajax with two additional parameters:

  • progress_indicator
    • Either a jQuery object, function callback or a HTML string specifying the progress indicator. If not specified then no progress indicator will be shown.
  • progress_indicator_delay
    • No. of milliseconds to wait from when the AJAX request has been sent before displaying the progress indicator. Default is 1000, i.e. 1 second.

The progress indicator can be one of the three types:

  • jQuery object:
    • show() will be called on it when the request is in progress and hide() will be called on it once the request completes.
  • Callback function:
    • it will be invoked with its argument as false (boolean) when the request is in progress and it will then be invoked with true (boolean) when the request has completed.
  • HTML string:
    • it will be added to the body within a DIV when the request is in progress. The DIV will then be removed once the request has completed. The DIV has the ‘ajax_progress_indicator’ class set on it so you can style it as you wish using CSS.

The plugin is available for download at http://plugins.jquery.com/project/ajaxprogress.

Leave a Comment