TOOL easyAjaxSpinner - Gix075/jqueryEasyTools GitHub Wiki
easyAjaxSpinner is a light version of jqueryIntroLoader plugin.
This tool can help you to build a simple spinner (based on Spin.js) that you can start and stop as you need.
This tool is included on jqueryEasyTools but you can use it also in "stand alone" mode, installing only its javascript and css code.
easyAjaxSpinner needs Spin.js to work.
We provide a minified production tool version that include Spin.js: easyAjaxSpinner.pack.min.js
<link rel="stylesheet" href="css/easyAjaxSpinner.min.css" />
<script src="jquery.min.js"></script>
<script src="js/easyAjaxSpinner.pack.min.js"></script>Place a DOM element in your page that will be the main container for the spinner. Best pratic is assign an univocal ID to the element:
<div id="ajaxSpinner"></div>At last initialize easyAjaxSpinner in this way:
var spinner = new easyAjaxSpinner(params);To pass some custom parameters you simply need and object like the following one.
// spinner options object with default values
params: {
speedIn: 300, // fadeIn speed [NUMBER]
speedOut: 300, // fadeOut speed [NUMBER]
delayIn: 0, // delay time before fadeIn [NUMBER]
delayOut: 0, // delay time before fadeOut [NUMBER]
zIndex: 1000, // spinner element css z-index [NUMBER]
cssClass: "default", // css class [STRING]
spinJs: {
// all allowed Spin.js options [OBJECT]
},
onAfterInit: function() {...}, // [FUNCTION] (require > v0.8.1)
onAfterIn: function() {...}, // [FUNCTION] (require > v0.8.1)
onAfterOut: function() {...}, // [FUNCTION] (require > v0.8.1)
onAfterDestroy: function() {...} // [FUNCTION] (require > v0.8.1)
}onAfterIn, onAfterOut and onAfterDestroy functions can be overwitten on .start() and .stop() methods.
Once easyAjaxSpinner is initialized, you can use class methods to start and stop the spinner.
spinner.start('#element',onAfterIn);
// '#element' is the DOM element that you want start as spinner spinner.stop('#element',onAfterOut,onAfterDestroy);
// '#element' is the DOM element that you want stop