jQuery Plugin For Custom Loading Overlay & Indicator - Show Loading

Show Loading is a really lightweight jQuery plugin that displays a GIF loading spinner with a full-sized loading overlay on a given container. Intended for use during ajax requests. Fully configurable and has callbacks support.

How to use it:

1. Import jQuery library and the jQuery show loading plugin's script into your document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.showLoading.min.js"></script>

2. Display a loading indicator.

$('#el').showLoading();

3. Style the loading spinner.

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

4. Style the loading overlay.

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

5. Hide the loading indicator.

$('#el').hideLoading();

6. Full plugin options and callback functions.

// configuration options.
indicatorID: '',
addClass: '',
hPos: 'center',
vPos: 'center',
indicatorZIndex: 5001,
overlayZIndex: 5000,
parent: '',
marginTop: 0,
marginLeft: 0,
overlayWidth: null,
overlayHeight: null,
overlayCSS: ''

// callbacks
beforeShow: null,
afterShow: null,

---

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