Simple jQuery Loading Spinner/Overlay Plugin - Loader

Loader is a simple jQuery which allows you to display a loading spinner/overlay on any specified elements like button, form, body, etc.

Basic Usage:

1. Load the jQuery library and the loader plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery-loader.js"></script>

2. Call the plugin on the target element where you want to display a loader.

$('#SELECTOR').loader(OPTIONS);

3. The required CSS to style the loader.

.loading { margin: auto; }

.loading span {
  line-height: 32px;
  margin-left: 12px;
  font-size: 16px;
  vertical-align: middle;
}

.loading img { vertical-align: middle; }

.loading_wrp {
  background-color: #FFF;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.5;
  filter: alpha(opacity=50);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1020;
}

.loading_wrp .x16 span {
  line-height: 16px;
  font-size: 12px;
  margin-left: 6px;
}

.loading_wrp .x32 img {
  width: 32px;
  height: 32px;
}

4. Available options and defaults.

// auto check container and use the size specified below
autoCheck: 32,

// custom CSS styles
css: {},

// spinner size
size: 16,  

// overlay color
bgColor: '#FFF', 

// overlay opacity
bgOpacity: 0.5,  

// font color
fontColor: false,

// position option
position: [0, 0, 0, 0],

// loading text
title: '',

// only one loading spinner/overlay at a time
isOnly: true,

// loading gif
imgUrl: 'images/loading[size].gif',

// callbacks
onShow: function () {
}, 
onClose: function () {
} 

5. Public methods.

// open a loader
$.loader.open();

// close a loader
$.loader.close();

---

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