jQuery widget for loading spinner. Allows create queues of tasks during which loading spinner will be shown.
Example:
<!-- Include Required Prerequisites -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- spinnerQueue -->
<script src="spinnerQueue/spinnerQueue.js" type="text/javascript"></script>
<link href="spinnerQueue/spinnerQueue.css" rel="stylesheet" type="text/css" />
<body>
<script>
$('body').spinnerQueue({showSpeed: 'fast', hideSpeed:'fast'}).spinnerQueue('started', 'pageLoad');
$( document ).ready(function() {
$('body').spinnerQueue().spinnerQueue('finished', 'pageLoad');
});
</script>
</body>$('body').spinnerQueue()or
$('body').spinnerQueue({showSpeed: 'fast', hideSpeed:'fast'})For first use, with initialization
$('body').spinnerQueue({showSpeed: 'fast', hideSpeed:'fast'}).spinnerQueue('started', 'pageLoad');Recommend using
$('body').spinnerQueue().spinnerQueue('started', 'pageLoad'); // With initialization
// If spinnerQueue is already initialized, nothing will be changedor
$('body').spinnerQueue('started', 'pageLoad');$('body').spinnerQueue('finished', 'pageLoad');body .spinnerQueue {
background-color: rgba(5,55,155, 0.2);
}
body .spinnerQueue .spinner-bg {
height: 100px;
width: 100px;
}
body .spinnerQueue .spinner-image {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0);
background: url('spinner.gif');
-webkit-animation: none;
animation: none;
}spinnerQueue('started', key, [isCumulative])| Parameters | Description |
|---|---|
| key (Type: String) |
Name of task. |
| isCumulative (Type: Boolean, default: False) |
If isCumulative is True every next call spinnerQueue('started', key, true) or spinnerQueue('started', key) will increase number of using key task by 1. In order to remove key task from queue spinnerQueue('finished', key) must be called appropriate number times. If isCumulative is False then one call spinnerQueue('finished', key) removes key task from queue. |
spinnerQueue('finished', key)| Parameters | Description |
|---|---|
| key (Type: String) |
Name of task. |
var options = {
queue : { 'task1':true, 'cumulativeTask':2 },
showSpeed : 'fast',
hideSpeed : 'fast',
};
$('body').spinnerQueue(options);showSpeed, hideSpeed : Speed are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
queue : It is object that contains tasks names as keys. : If value of key is True then one call of spinnerQueue('finished', key) is enough to removing task from queue. If spinnerQueue('started', key) or spinnerQueue('started', key, false) is already called, nothing will change. : If value of key is Number then every spinnerQueue('started', key, true) will increase value by 1. Task with name key will delete if spinnerQueue('finished', key) is called value times.
Remove spinner from DOM
$('body').spinnerQueue('destroy');var inQueue = $('body').spinnerQueue('isInQueue', key);var isEmpty = $('body').spinnerQueue('isQueueEmpty');var size = $('body').spinnerQueue('queueSize');