jquery plugin for easy creating loading css3 animations
Simple to use. Contains 14 animation effects and can use images.
For work required only jQuery, other libraries are not required.
Plugin works on all browsers and IE10+ (for css3 animation effects).
waitMe.min.js [3Kb]
waitMe.css [21.3Kb]
waitMe.min.css [19.1Kb]
$(container).waitMe({param1 : value1, param2 : value2, ...});
effect - animation effect (string).Use:
'bounce' - default, none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, timer, pulse, progressBar, bouncePulse, img.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.source - url to image (string).Use:
'url'. By default, use empty string. Use with effect: 'img'.hide - for close waitMe.Use:
$(container).waitMe("hide");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'pulse - sizeW: '30px', sizeH: '30px'progressbar - sizeW: '200px', sizeH: '20px'bouncePulse - sizeW: '20px', sizeH: '20px'Don't use as element container non block elements such as table, input, textarea and etc. Use div, span or body (you may use html and it would be work as body).
<body class="waitMe_body">
<div class="waitMe_container progress" style="background:#fff">
<div style="background:#000"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container working" style="background:#fff">
<div style="background:#000"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container img" style="background:#fff">
<div style="background:url('img.png')"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container text" style="background:#fff">
<div style="color:#000">Loading</div>
</div>
</body>