waitMe

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).

DEMO

Direct links to libs

waitMe.js [8.6Kb]
waitMe.min.js [3.3Kb]
waitMe.css [14.5Kb]
waitMe.min.css [13.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, 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, array).
Use: '#000', ['','',...] - you can use multicolor for effect

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'.

onClose - code execution after popup closed (function).
Use: function(){}

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: '1px', 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).

Animation during the initial page load

<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>

salconetti / waitMe