waitMe

jquery plugin for easy creating loading css3 animations

For work required only jQuery, other libraries are not required. Plugin use css3 animation, and works on all browsers and IE10+.

DEMO

Direct links to libs

waitMe.js [5.3Kb]
waitMe.min.js [2.4Kb]
waitMe.css [17.2Kb]
waitMe.min.css [15.3Kb]

$(container).waitMe({param1 : value1, param2 : value2, ...});

Parameters

effect - animation effect (string).
Use: 'bounce' - default, none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, timer.

text - place text under the effect (string).
Use: 'text'.

bg - background for container (string).
Use: 'rgba(255,255,255,0.7)'. You can use color and image.

color - color for background animation and text (string).
Use: '#000'

sizeW - change width for elem animation (string).
Use: '40px'. By default, use empty string.

sizeH - change height for elem animation (string).
Use: '40px'. By default, use empty string.

Methods

hide - for close waitMe.
Use: $(container).waitMe("hide");

Notes

For sizeW and sizeH, default sizes is:
bounce - sizeW: '20px', sizeH: '20px'
rotateplane - sizeW: '30px', sizeH: '30px'
stretch - sizeW: '8px', sizeH: '60px'
orbit - sizeW: '40px', sizeH: '40px'
roundBounce - sizeW: '60px', sizeH: '60px'
win8 - sizeW: '40px', sizeH: '40px'
win8_linear - sizeW: '150px', sizeH: '6px'
ios - sizeW: '40px', sizeH: '40px'
facebook - sizeW: '6px', sizeH: '25px'
rotation - sizeW: '60px', sizeH: '60px'
timer - sizeW: '40px', sizeH: '40px'