1.19[31.10.17]
Download GitHub Repo
waitMe
jquery plugin for easy creating loading css3/images animations
waitMe
Documentation
Basic

    						$('#elem').waitMe({}) - #elem is html object, click on which causes to show waitme.

Options

    						effect - animation effect. 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. Use: 'text'.
    						bg - background for container. Use: 'rgba(255,255,255,0.7)' - default, false.
    						color - color for background animation and text. Use: '#000' - default, ['','',...] - you can use multicolor for effect.
    						maxSize - set max size for elem animation. Use: '' - default, 40.
    						waitTime - wait time im ms to close. Use: -1 - default, 3000.
    						textPos - change text position. Use: 'vertical' - default, 'horizontal'.
    						fontSize - change font size. Use: '' - default, '18px'.
    						source - url to image. Use: '' - default, 'url' - for effect: 'img'.
    						onClose - code execution after popup closed. Use: function(event, el){}.

Methods

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

Triggers

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

Notes

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

Examples
default param
Name Email Phone
To start click Submit button
Effect

    					$('#container').waitMe({
    					effect : 'bounce',
    					text : '',
    					bg : rgba(255,255,255,0.7),
    					color : #000,
    					maxSize : '',
    					waitTime : -1,
    					textPos : 'vertical',
    					fontSize : '',
    					source : '',
    					onClose : function() {}
    					});

maxSize

    					$('#container').waitMe({
    					effect : 'bounce',
    					text : '',
    					bg : rgba(255,255,255,0.7),
    					color : #000,
    					maxSize : 30,
    					waitTime : -1,
    					textPos : 'vertical',
    					fontSize : '',
    					source : '',
    					onClose : function() {}
    					});

horizontal text position
Click to start

    					$('#container').waitMe({
    					effect : 'bounce',
    					text : '',
    					bg : rgba(255,255,255,0.7),
    					color : #000,
    					maxSize : '',
    					waitTime : -1,
    					textPos : 'horizontal',
    					fontSize : '',
    					source : '',
    					onClose : function() {}
    					});

Animation during the initial page load
Effect
progress

    					<body class="waitMe_body">
    					<div class="waitMe_container progress" style="background:#fff">
    					<div style="background:#000"></div>
    					</div>
    					</body>

working

    					<body class="waitMe_body">
    					<div class="waitMe_container working" style="background:#fff">
    					<div style="background:#000"></div>
    					</div>
    					</body>

img

    					<body class="waitMe_body">
    					<div class="waitMe_container img" style="background:#fff">
    					<div style="background:url('img.png')"></div>
    					</div>
    					</body>

text

    					<body class="waitMe_body">
    					<div class="waitMe_container text" style="background:#fff">
    					<div style="color:#000">Loading</div>
    					</div>
    					</body>