Skip to content

Latest commit

 

History

History
91 lines (74 loc) · 3.68 KB

README.md

File metadata and controls

91 lines (74 loc) · 3.68 KB
Raw

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.9Kb]
waitMe.min.js [3.7Kb]
waitMe.css [15.3Kb]
waitMe.min.css [14Kb]



$(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
- maxSize - set max size for elem animation (string).
Use: 40. By default, use empty string.
- textPos - change text position (string).
Use: 'vertical' - default, 'horizontal'.
- fontSize - change font size (string).
Use: '18px'. 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 closed (function).
Use: function(){}

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

Triggers
- close - execution after closed.
Use: $('.waitMe').on('close', function() {});

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>