Cross-browser Loading Indicator Plugin - jQuery showLoading.js

showLoading.js is a small, customizable, cross-browser jQuery loading indicator plugin to indicate the AJAX loading status on any container element.

How to use it:

1. Link to jQuery JavaScript library and the jQuery showLoading.js script.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/jquery.showLoading.js"></script>

2. Call the function showLoading() on the target element and done. Note that the container must have an id attribute

<div id="activity_pane">
  Here is where we will load something via ajax.

  This container must have an id attribute
</div>

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

3. Style the loading indicator (loading spinner and loading overylay) in your CSS.

.loading-indicator {
  height: 80px;
  width: 80px;
  background: url( '../images/loading.gif' );
  background-repeat: no-repeat;
  background-position: center center;
}

.loading-indicator-overlay {
  background-color: #FFFFFF;
  opacity: 0.6;
  filter: alpha(opacity = 60);
}

4. Hide the loading indicator manually.

jQuery('#activity_pane').hideLoading();

5. The complex usage with jQuery load method:

jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load(
  '/path/to/my/url', 
  {},
  function() {
    jQuery('#activity_pane').hideLoading();
  }
); 

6. Override the default loading spinner:

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

.loading-indicator-bars {
  background-image: url('images/loading-bars.gif');
  width: 150px;
}

7. All default configuration options.

jQuery('#activity_pane').showLoading({
  'addClass': '',
  'hPos': 'center', 
  'vPos': 'center',
  'indicatorZIndex' : 5001, 
  'overlayZIndex': 5000, 
  'parent': '',
  'marginTop': 0,
  'marginLeft': 0,
  'overlayWidth': null,
  'overlayHeight': null
});

8. Event handlers available.

jQuery('#activity_pane').showLoading({

  // before show
  'beforeShow': function(){}; 

  // after show
  'afterShow': function(){}; 
  
});

---

This awesome jQuery plugin is developed by CrazyHong. For more Advanced Usages, please check the demo page or visit the official website.