Cross-browser Loading Indicator Plugin - jQuery showLoading.js

File Size: 12.2 KB
Views Total: 8814
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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
function() {

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.


5. The complex usage with jQuery load method:

  function() {

6. Override the default loading spinner:

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

7. All default configuration options.

  'addClass': '',
  'hPos': 'center', 
  'vPos': 'center',
  'indicatorZIndex' : 5001, 
  'overlayZIndex': 5000, 
  'parent': '',
  'marginTop': 0,
  'marginLeft': 0,
  'overlayWidth': null,
  'overlayHeight': null

8. Event handlers available.


  // 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.