utils.spinner.js
When data is loaded ( via ajax or CPU-intense processing ) we need to let the user know that something is happening
Spinner
.tiny
.small
.medium
.large
.x2
.x3
//medium spinner
.medium
Spinner Colors
.standalone
.white
.gray
.red
.black
.green
//medium spinner
.red
Spinner Mode
.tiny
.small
.medium
.large
.x2
.x3
//success
.medium
//error
.small
Code |
Action |
|---|---|
new UTILS.Spinner({
target: $('body'),
type: 'medium',
blur: true,
center: true,
msg: 'Loading...'
}).show();
|
|
new UTILS.Spinner({
target: $('#spinner-mode-result'),
type: 'medium',
msg: 'Loading records...',
onShow: Spinner => {
new UTILS.Countdown({
target: Spinner.getTarget(),
duration: 3,
color: 'red',
format: 's [sec]',
onStop: Countdown => {
Spinner.setMode('success','Records loaded successfully!');
Countdown.clean();
}
}).start();
}
}).show();
|
|
new UTILS.Box({
w: 700,
center: true,
title: 'simple box setting content',
classname: 'edit-box',
html: 'data will be loaded in ',
fx: { effect:'slide-down' },
onShow: function(Box){
new UTILS.Spinner({
target: Box,
type: 'medium',
blur: true,
center: true,
msg: 'Spinner Inside...'
}).show();
}
}).show();
|
|
new UTILS.Box({
w: 700,
center: true,
title: 'data box',
classname: 'edit-box',
html: 'data will be loaded in ',
fx: { effect:'slide-down' },
onShow: function(Box){
var Box = Box;
var Countdown = new UTILS.Countdown({
target:Box,
duration:3,
color:'red',
format:'s [sec]',
onStop: function(){
new UTILS.Spinner({
target:Box.getMainbody(),
type:'medium',
blur:true,
center:true,
msg:'Loading Data With Countdown...'
}).show();
}
}).start();
}
}).show();
|
API
Option |
Required |
Default |
Description |
|---|---|---|---|
| target | optional | $('body') |
DOM elm where the spinner will be inserted |
| type | optional | small |
specifies the size & shape of the spinner |
| msg | optional | |
message to show next to the spinner --> if not specified, spinner is shown as a square |
| standalone | optional | false |
specifies if the spinner is inserted into another object or not |
| color | optional | none (transparent) |
specifies the color of the spinner |
| center | optional | false |
centers the spinner within the target |
| shadow | optional | false |
specifies if the spinner has a shadow |
| blur | optional | false |
blurs out the target elm |
Methods
Method |
Default |
Repeat |
Description |
|---|---|---|---|
| onShow | null |
REPEAT | stack of functions to execute when the spinner is shown |
| onHide | null |
REPEAT | stack of functions to execute when the spinner is hidden |