This plugin is designed to show a loading graphic over a specific area of the screen (e.g. a specific <div>) while an ajax request is running.

Works with jQuery 1.3.2 and jQuery 1.4.2
Tested in IE6, IE7, Firefox, Chrome, Safari

Originally created for the Junebug dating site.

Options

Examples

jQuery(document).ready(
       function() {

         //
         // When a user clicks the 'loading-default' link,
         // call showLoading on the activity pane
         // with default options
         //
         jQuery('a.loading-default').click(

           function() {
               jQuery('#activity_pane').showLoading();
           }

         );

         //
         // When a user clicks the 'loading-ajax' link,
         // call showLoading before performing the 'load'
         //
         jQuery('a.load-ajax').click(

           function() {
               jQuery('#activity_pane').showLoading();
               jQuery('#activity_pane').load( '/some/url',
                    function() {
                          // callback fires after ajax load completes
                          jQuery('#activity_pane').hideLoading();
                   }
               );
           }

         );

         //
         // When a user clicks the 'loading-bars' link,
         // call showLoading with addClass specified
         //
         jQuery('a.loading-bars').click(

           function() {
               jQuery('#activity_pane').showLoading(
                 {
                   'addClass': 'loading-indicator-bars'
                                              }
               );
           }

         );

         //
         // When a user clicks the 'loading-hide' link,
         // call hideLoading on the activity pane
         //
         jQuery('a.loading-hide').click(

           function() {
               jQuery('#activity_pane').hideLoading();
           }

         );

       }

   );