├── LICENSE.md
├── README.md
├── img.svg
├── index.html
├── waitMe.css
├── waitMe.js
├── waitMe.min.css
└── waitMe.min.js


/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 vadimsva
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | waitMe
 2 | ======
 3 | 
 4 | jquery plugin for easy creating loading css3 animations<br>
 5 | Simple to use. Contains 14 animation effects and can use images.
 6 | 
 7 | <i>For work required only jQuery, other libraries are not required.</i>
 8 | <i>Plugin works on all browsers and IE10+ (for css3 animation effects).</i>
 9 | <br>
10 | 
11 | Documentation
12 | =============
13 | 
14 | <a href="http://vadimsva.github.io/waitMe/" target="_blank"><b>DOCUMENTATION & EXAMPLES</b></a>
15 | 
16 | 
17 | License
18 | =======
19 | 
20 | The MIT License (MIT)
21 | 


--------------------------------------------------------------------------------
/img.svg:
--------------------------------------------------------------------------------
1 | <svg width='48px' height='48px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6 | <meta name="apple-mobile-web-app-capable" content="yes">
  7 | <title>waitMe</title>
  8 | <style>
  9 | * {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
 10 | body {background:#f1f1f1}
 11 | 
 12 | ::-webkit-scrollbar {width:10px}
 13 | ::-webkit-scrollbar-track {background-color:#f1f1f1}
 14 | ::-webkit-scrollbar-thumb {background-color:#9699a2}
 15 | ::-webkit-scrollbar-thumb:hover {background-color:#555}
 16 | 
 17 | #page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px}
 18 | #page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px}
 19 | 
 20 | .pageCaption {margin-bottom:40px;font-size:34px;line-height:40px}
 21 | .blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px}
 22 | 
 23 | #header {}
 24 | .prjData {float:right;font-weight:500;line-height:24px;display:flex}
 25 | .prjData > a {font-size:12px;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;margin-left:5px;transition:all 0.2s ease-in-out}
 26 | .prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)}
 27 | .prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px}
 28 | .prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999}
 29 | .prjData > .prjDownloadLink {color:#fff;background:#0084ff}
 30 | .prjData > .prjGitLink {color:#555;background:#ccc}
 31 | .prjName {font-size:24px;font-weight:500;line-height:24px}
 32 | .prjDesc {color:#777;margin-top:5px;font-size:90%}
 33 | 
 34 | #footer {}
 35 | .prjCopyright {color:#777}
 36 | .prjLicense {float:right;font-size:12px}
 37 | .prjAuthor {font-size:12px}
 38 | 
 39 | 
 40 | .exampleContainer {margin:-1px 0 50px}
 41 | .exampleContainer:last-child {margin-bottom:0}
 42 | .exampleContainer .exampleLive {padding:20px 0;font-size:14px}
 43 | .exampleContainer .exampleLive:after {content:'';clear:both;display:table}
 44 | .exampleContainer .exampleLive .exampleLiveTitle {padding-bottom:10px}
 45 | .exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto;border-radius:4px}
 46 | .exampleContainer .exampleCode pre {line-height:0}
 47 | .exampleContainer .exampleCode code {white-space:pre-line}
 48 | .exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
 49 | .exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
 50 | .exampleContainer .exampleCode code .tab {padding-left:15px}
 51 | .exampleContainer .exampleCode code .tab2 {padding-left:30px}
 52 | .exampleContainer .exampleCode code .tab3 {padding-left:45px}
 53 | .exampleContainer .exampleCode code .tab4 {padding-left:60px}
 54 | .exampleContainer .exampleCode code .tag {color:#97e0e9}
 55 | .exampleContainer .exampleCode code .text {color:#fff}
 56 | .exampleContainer .exampleCode code .key {color:#bf5c5b}
 57 | .exampleContainer .exampleCode code .val {color:#fadf8c}
 58 | .exampleContainer .exampleCode code .var {color:#aae997}
 59 | .exampleContainer .exampleCode code .var2 {color:#b297e9}
 60 | 
 61 | .docContainer {margin-bottom:40px}
 62 | .docContainer:last-child {margin-bottom:0}
 63 | .docContainer > .docLive > .docTitle {padding-bottom:10px}
 64 | .docContainer > .docLive > .docText {padding-bottom:10px;font-size:13px;color:#444}
 65 | .docContainer > .docLive > p {margin-bottom:10px;line-height:22px}
 66 | .docContainer > .docCode {background:#f7f7f9;padding:20px;overflow:auto;border-radius:4px}
 67 | .docContainer > .docCode + .docLive {margin-top:20px}
 68 | .docContainer > .docCode pre {line-height:0}
 69 | .docContainer > .docCode code {white-space:pre-line}
 70 | .docContainer > .docCode code * {font-family:consolas;font-size:13px}
 71 | .docContainer > .docCode code > p {line-height:22px;color:#7993ad;display:inline-block}
 72 | .docContainer > .docCode code .tab {padding-left:15px}
 73 | .docContainer > .docCode code .tab2 {padding-left:30px}
 74 | .docContainer > .docCode code .tab3 {padding-left:45px}
 75 | .docContainer > .docCode code .tab4 {padding-left:60px}
 76 | .docContainer > .docCode code .tag {color:#26bfef}
 77 | .docContainer > .docCode code .text {color:#333}
 78 | .docContainer > .docCode code .key {color:#f52222}
 79 | .docContainer > .docCode code .val {color:#007b10}
 80 | .docContainer > .docCode code .var {color:#1cc1d4}
 81 | .docContainer > .docCode code .var2 {color:#7c46e8}
 82 | .docContainer .code {background:#d9dee2;display:inline-block;padding:0 2px;border-radius:3px;line-height:18px;font-family:consolas;font-size:13px}
 83 | 
 84 | .containerBlock form {margin:0 25%;text-align:center;padding:30px;background:#fafafa;border:1px solid #ddd}
 85 | .containerBlock form > label {display:block;padding-bottom:5px;text-align:left}
 86 | .containerBlock form > input {width:100%;padding:6px 12px;margin-bottom:15px}
 87 | .containerBlock form > button {margin-top:15px}
 88 | .controlContainer {padding-top:50px;text-align:center}
 89 | .controlContainer div {padding-bottom:10px}
 90 | .controlContainer select {padding:6px 12px;height:34px}
 91 | .controlContainer select + button {margin-left:20px}
 92 | 
 93 | 
 94 | /* btn */
 95 | .btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px;transition:all 0.3s ease-in-out}
 96 | .btn.btn-default {}
 97 | .btn.btn-default:hover {background:#eee;border-color:#bbb}
 98 | .btn.btn-default:focus {background:#ddd;border-color:#bbb}
 99 | .btn.btn-primary {background-color:#0084ff;border-color:#0084ff;color:#fff}
100 | .btn.btn-primary:hover {background-color:#006dd2;border-color:#006dd2}
101 | .btn.btn-primary:focus {background-color:#0155a2;border-color:#0155a2;transform:translateY(1px)}
102 | .btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
103 | .btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}
104 | 
105 | .btn.btn-left {float:left;margin:0 5px 0 0!important}
106 | 
107 | 
108 | /* tabs */
109 | .tabs_container {position:fixed;left:calc(50% - 400px - 180px);width:160px;margin-top:-30px}
110 | .tabs_container:after {content:'';clear:both;display:table}
111 | .tabs_container > .tab {line-height:40px;cursor:pointer;color:#7d8798;margin:0 15px;font-size:14px}
112 | .tabs_container > .tab > span {position:relative;display:inline-block;line-height:24px}
113 | .tabs_container > .tab.active > span {color:#000}
114 | .tabs_container > .tab > span:before {content:'';position:absolute;height:2px;left:0;width:0;bottom:0;background:#0084ff;transition:.2s}
115 | .tabs_container > .tab.active > span:before,
116 | .tabs_container > .tab:hover > span:before {width:100%}
117 | .tabs_container > .tab:hover {color:#000}
118 | .tabs_container > .totop {position:fixed;bottom:30px;width:160px;padding:20px;line-height:20px;text-align:center;background:rgba(200, 200, 200, 0.2);font-size:25px;color:#7d8798;border-radius:3px;cursor:pointer;transition:all 0.3s ease-in-out}
119 | .tabs_container > .totop:hover {background:rgba(200, 200, 200, 0.4)}
120 | .page_container {position:relative}
121 | .page_container > .page {min-height:900px;padding-bottom:150px;position:relative}
122 | .page_container > .page:after {content:'';position:absolute;bottom:100px;border-bottom:1px solid #eee;margin:auto;left:-30px;right:-30px}
123 | .page_container > .page:last-child {padding-bottom:0}
124 | .page_container > .page:last-child:after {display:none}
125 | 
126 | 
127 | 
128 | @media (max-width: 840px){
129 | #page {width:auto;min-width:0;margin:20px 20px 100px}
130 | }
131 | 
132 | @media (max-width: 460px){
133 | .containerBlock form {margin:0}
134 | }
135 | 
136 | #waitMe_ex2 {width:40px;margin-right:20px;vertical-align:top}
137 | #waitMe_ex3 {line-height:20px;width:50%;border:1px solid #eee;padding:7px 15px;display:inline-block;margin-right:20px;vertical-align:top}
138 | </style>
139 | <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
140 | <link type="text/css" rel="stylesheet" href="waitMe.css">
141 | </head>
142 | <body>
143 | 
144 | <div id="page">
145 | 	
146 | 	<div id="header">
147 | 		<div class="prjData">
148 | 			<div class="prjVer" title="Current version/date">1.19<span>[31.10.17]</span></div>
149 | 			<a href="https://github.com/vadimsva/waitMe/releases" class="prjDownloadLink">Download</a>
150 | 			<a href="https://github.com/vadimsva/waitMe" class="prjGitLink">GitHub Repo</a>
151 | 		</div>
152 | 		<div class="prjName">waitMe</div>
153 | 		<div class="prjDesc">jquery plugin for easy creating loading css3/images animations</div>
154 | 	</div>
155 | 	
156 | 	<div id="page_content">
157 | 	
158 | 		<div class="page_container">
159 | 			<div class="page" data-page="waitMe">
160 | 				
161 | 				<div class="pageCaption">waitMe</div>
162 | 				
163 | 				<div class="blockCaption">Documentation</div>
164 | 				
165 | 				<div class="docContainer">
166 | 					<div class="docLive">
167 | 						<div class="docTitle">Basic</div>
168 | 					</div>
169 | 					<div class="docCode"><pre><code>
170 | 						<p><span class="key">$(<span class="val">'#elem'</span>).waitMe(<span class="text">{}</span>)</span> - #elem is html object, click on which causes to show waitme.</p>
171 | 					</code></pre></div>
172 | 				</div>
173 | 
174 | 				<div class="docContainer">
175 | 					<div class="docLive">
176 | 						<div class="docTitle">Options</div>
177 | 					</div>
178 | 					<div class="docCode"><pre><code>
179 | 						<p><span class="key">effect</span> - animation effect. Use: <span class="val code">'bounce'</span> - default, <span class="val code">'none'</span>, <span class="val code">'rotateplane'</span>, <span class="val code">'stretch'</span>, <span class="val code">'orbit'</span>, <span class="val code">'roundBounce'</span>, <span class="val code">'win8'</span>, <span class="val code">'win8_linear'</span>, <span class="val code">'ios'</span>, <span class="val code">'facebook'</span>, <span class="val code">'rotation'</span>, <span class="val code">'timer'</span>, <span class="val code">'pulse'</span>, <span class="val code">'progressBar'</span>, <span class="val code">'bouncePulse'</span>, <span class="val code">'img'</span>.</p>
180 | 						<p><span class="key">text</span> - place text under the effect. Use: <span class="val code">'text'</span>.</p>
181 | 						<p><span class="key">bg</span> - background for container. Use: <span class="val code">'rgba(255,255,255,0.7)'</span> - default, <span class="val code">false</span>.</p>
182 | 						<p><span class="key">color</span> - color for background animation and text. Use: <span class="val code">'#000'</span> - default, <span class="val code">['','',...]</span> - you can use multicolor for effect.</p>
183 | 						<p><span class="key">maxSize</span> - set max size for elem animation. Use: <span class="val code">''</span> - default, <span class="val code">40</span>.</p>
184 | 						<p><span class="key">waitTime</span> - wait time im ms to close. Use: <span class="val code">-1</span> - default, <span class="val code">3000</span>.</p>
185 | 						<p><span class="key">textPos</span> - change text position. Use: <span class="val code">'vertical'</span> - default, <span class="val code">'horizontal'</span>.</p>
186 | 						<p><span class="key">fontSize</span> - change font size. Use: <span class="val code">''</span> - default, <span class="val code">'18px'</span>.</p>
187 | 						<p><span class="key">source</span> - url to image. Use: <span class="val code">''</span> - default, <span class="val code">'url'</span> - for <span class="val code">effect: 'img'</span>.</p>
188 | 						<p><span class="key">onClose</span> - code execution after popup closed. Use: <span class="val code">function(event, el){}</span>.</p>
189 | 					</code></pre></div>
190 | 				</div>
191 | 				
192 | 				<div class="docContainer">
193 | 					<div class="docLive">
194 | 						<div class="docTitle">Methods</div>
195 | 					</div>
196 | 					<div class="docCode"><pre><code>
197 | 						<p><span class="key">hide</span> - for close waitMe. Use: <span class="val code">$(container).waitMe("hide");</span>.</p>
198 | 					</code></pre></div>
199 | 				</div>
200 | 				
201 | 				<div class="docContainer">
202 | 					<div class="docLive">
203 | 						<div class="docTitle">Triggers</div>
204 | 					</div>
205 | 					<div class="docCode"><pre><code>
206 | 						<p><span class="key">close</span> - execution after closed. Use: <span class="val code">$(el).on('close', function() {});</span>.</p>
207 | 					</code></pre></div>
208 | 				</div>
209 | 				
210 | 				<div class="docContainer">
211 | 					<div class="docLive">
212 | 						<div class="docTitle">Notes</div>
213 | 					</div>
214 | 					<div class="docLive">
215 | 						<p>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).</p>
216 | 					</div>
217 | 				</div>
218 | 
219 | 
220 | 				
221 | 			<div class="blockCaption">Examples</div>
222 | 
223 | 			
224 | 			<div class="exampleContainer">
225 | 				<div class="exampleLive">
226 | 					<div class="exampleLiveTitle">default param</div>
227 | 					<div class="containerBlock">
228 | 						<form>
229 | 							<label>Name</label>
230 | 							<input type="text">
231 | 							<label>Email</label>
232 | 							<input type="text">
233 | 							<label>Phone</label>
234 | 							<input type="text">
235 | 							<button type="button" class="btn btn-primary" id="waitMe_ex">Submit</button>
236 | 						</form>
237 | 					</div>
238 | 					<div class="controlContainer">
239 | 						<div>To start click Submit button</div>
240 | 						Effect
241 | 						<select id="waitMe_ex_effect">
242 | 							<option>none</option>
243 | 							<option selected>bounce</option>
244 | 							<option>rotateplane</option>
245 | 							<option>stretch</option>
246 | 							<option>orbit</option>
247 | 							<option>roundBounce</option>
248 | 							<option>win8</option>
249 | 							<option>win8_linear</option>
250 | 							<option>ios</option>
251 | 							<option>facebook</option>
252 | 							<option>rotation</option>
253 | 							<option>timer</option>
254 | 							<option>pulse</option>
255 | 							<option>progressBar</option>
256 | 							<option>bouncePulse</option>
257 | 							<option>img</option>
258 | 						</select>
259 | 						<button class="btn btn-default waitMe_ex_close">STOP</button>
260 | 					</div>
261 | 				</div>
262 | 				<div class="exampleCode"><pre><code>
263 | 					<p><span class="text">$('</span><span class="tag">#container</span><span class="text">').waitMe(</span>{</p>
264 | 					<p class="tab"><span class="key">effect</span> : <span class="val">'bounce'</span>,</p>
265 | 					<p class="tab"><span class="key">text</span> : <span class="val">''</span>,</p>
266 | 					<p class="tab"><span class="key">bg</span> : <span class="val">rgba(255,255,255,0.7)</span>,</p>
267 | 					<p class="tab"><span class="key">color</span> : <span class="val">#000</span>,</p>
268 | 					<p class="tab"><span class="key">maxSize</span> : <span class="val">''</span>,</p>
269 | 					<p class="tab"><span class="key">waitTime</span> : <span class="val">-1</span>,</p>
270 | 					<p class="tab"><span class="key">textPos</span> : <span class="val">'vertical'</span>,</p>
271 | 					<p class="tab"><span class="key">fontSize</span> : <span class="val">''</span>,</p>
272 | 					<p class="tab"><span class="key">source</span> : <span class="val">''</span>,</p>
273 | 					<p class="tab"><span class="key">onClose</span> : <span class="val">function() {}</span></p>
274 | 					<p>}<span class="text">)</span>;</p>
275 | 				</code></pre></div>
276 | 			</div>
277 | 			
278 | 			
279 | 			<div class="exampleContainer">
280 | 				<div class="exampleLive">
281 | 					<div class="exampleLiveTitle">maxSize</div>
282 | 					<button type="button" class="btn btn-primary" id="waitMe_ex2"></button>
283 | 					<button type="button" class="btn btn-default waitMe_ex_close">STOP</button>
284 | 				</div>
285 | 				<div class="exampleCode"><pre><code>
286 | 					<p><span class="text">$('</span><span class="tag">#container</span><span class="text">').waitMe(</span>{</p>
287 | 					<p class="tab"><span class="key">effect</span> : <span class="val">'bounce'</span>,</p>
288 | 					<p class="tab"><span class="key">text</span> : <span class="val">''</span>,</p>
289 | 					<p class="tab"><span class="key">bg</span> : <span class="val">rgba(255,255,255,0.7)</span>,</p>
290 | 					<p class="tab"><span class="key">color</span> : <span class="val">#000</span>,</p>
291 | 					<p class="tab"><span class="key">maxSize</span> : <span class="val">30</span>,</p>
292 | 					<p class="tab"><span class="key">waitTime</span> : <span class="val">-1</span>,</p>
293 | 					<p class="tab"><span class="key">textPos</span> : <span class="val">'vertical'</span>,</p>
294 | 					<p class="tab"><span class="key">fontSize</span> : <span class="val">''</span>,</p>
295 | 					<p class="tab"><span class="key">source</span> : <span class="val">''</span>,</p>
296 | 					<p class="tab"><span class="key">onClose</span> : <span class="val">function() {}</span></p>
297 | 					<p>}<span class="text">)</span>;</p>
298 | 				</code></pre></div>
299 | 			</div>
300 | 			
301 | 			
302 | 			<div class="exampleContainer">
303 | 				<div class="exampleLive">
304 | 					<div class="exampleLiveTitle">horizontal text position</div>
305 | 					<div id="waitMe_ex3">Click to start</div>
306 | 					<button type="button" class="btn btn-default waitMe_ex_close">STOP</button>
307 | 				</div>
308 | 				<div class="exampleCode"><pre><code>
309 | 					<p><span class="text">$('</span><span class="tag">#container</span><span class="text">').waitMe(</span>{</p>
310 | 					<p class="tab"><span class="key">effect</span> : <span class="val">'bounce'</span>,</p>
311 | 					<p class="tab"><span class="key">text</span> : <span class="val">''</span>,</p>
312 | 					<p class="tab"><span class="key">bg</span> : <span class="val">rgba(255,255,255,0.7)</span>,</p>
313 | 					<p class="tab"><span class="key">color</span> : <span class="val">#000</span>,</p>
314 | 					<p class="tab"><span class="key">maxSize</span> : <span class="val">''</span>,</p>
315 | 					<p class="tab"><span class="key">waitTime</span> : <span class="val">-1</span>,</p>
316 | 					<p class="tab"><span class="key">textPos</span> : <span class="val">'horizontal'</span>,</p>
317 | 					<p class="tab"><span class="key">fontSize</span> : <span class="val">''</span>,</p>
318 | 					<p class="tab"><span class="key">source</span> : <span class="val">''</span>,</p>
319 | 					<p class="tab"><span class="key">onClose</span> : <span class="val">function() {}</span></p>
320 | 					<p>}<span class="text">)</span>;</p>
321 | 				</code></pre></div>
322 | 			</div>
323 | 			
324 | 			
325 | 			<div class="containerBlock">
326 | 				<div class="controlContainer">
327 | 					<div>Animation during the initial page load</div>
328 | 					Effect
329 | 					<select id="waitMe_ex_body_effect">
330 | 						<option selected>progress</option>
331 | 						<option>working</option>
332 | 						<option>img</option>
333 | 						<option>text</option>
334 | 					</select>
335 | 					<button class="btn btn-primary" id="waitMe_ex_body">EXAMPLE</button>
336 | 				</div>
337 | 			
338 | 			</div>
339 | 			
340 | 			<div class="exampleContainer">
341 | 				<div class="exampleLive">
342 | 					<div class="exampleLiveTitle">progress</div>
343 | 				</div>
344 | 				<div class="exampleCode"><pre><code>
345 | 					<p>&lt;<span class="tag">body</span> <span class="key">class</span>=<span class="val">"waitMe_body"</span>&gt;</p>
346 | 					<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"waitMe_container progress"</span> <span class="key">style</span>=<span class="val">"background:#fff"</span>&gt;</p>
347 | 					<p class="tab2">&lt;<span class="tag">div</span> <span class="key">style</span>=<span class="val">"background:#000"</span>&gt;&lt;/<span class="tag">div</span>&gt;</p>
348 | 					<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
349 | 					<p>&lt;/<span class="tag">body</span>&gt;</p>
350 | 				</code></pre></div>
351 | 			</div>
352 | 			<div class="exampleContainer">
353 | 				<div class="exampleLive">
354 | 					<div class="exampleLiveTitle">working</div>
355 | 				</div>
356 | 				<div class="exampleCode"><pre><code>
357 | 					<p>&lt;<span class="tag">body</span> <span class="key">class</span>=<span class="val">"waitMe_body"</span>&gt;</p>
358 | 					<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"waitMe_container working"</span> <span class="key">style</span>=<span class="val">"background:#fff"</span>&gt;</p>
359 | 					<p class="tab2">&lt;<span class="tag">div</span> <span class="key">style</span>=<span class="val">"background:#000"</span>&gt;&lt;/<span class="tag">div</span>&gt;</p>
360 | 					<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
361 | 					<p>&lt;/<span class="tag">body</span>&gt;</p>
362 | 				</code></pre></div>
363 | 			</div>
364 | 			<div class="exampleContainer">
365 | 				<div class="exampleLive">
366 | 					<div class="exampleLiveTitle">img</div>
367 | 				</div>
368 | 				<div class="exampleCode"><pre><code>
369 | 					<p>&lt;<span class="tag">body</span> <span class="key">class</span>=<span class="val">"waitMe_body"</span>&gt;</p>
370 | 					<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"waitMe_container img"</span> <span class="key">style</span>=<span class="val">"background:#fff"</span>&gt;</p>
371 | 					<p class="tab2">&lt;<span class="tag">div</span> <span class="key">style</span>=<span class="val">"background:url('img.png')"</span>&gt;&lt;/<span class="tag">div</span>&gt;</p>
372 | 					<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
373 | 					<p>&lt;/<span class="tag">body</span>&gt;</p>
374 | 				</code></pre></div>
375 | 			</div>
376 | 			<div class="exampleContainer">
377 | 				<div class="exampleLive">
378 | 					<div class="exampleLiveTitle">text</div>
379 | 				</div>
380 | 				<div class="exampleCode"><pre><code>
381 | 					<p>&lt;<span class="tag">body</span> <span class="key">class</span>=<span class="val">"waitMe_body"</span>&gt;</p>
382 | 					<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"waitMe_container text"</span> <span class="key">style</span>=<span class="val">"background:#fff"</span>&gt;</p>
383 | 					<p class="tab2">&lt;<span class="tag">div</span> <span class="key">style</span>=<span class="val">"color:#000"</span>&gt;Loading&lt;/<span class="tag">div</span>&gt;</p>
384 | 					<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
385 | 					<p>&lt;/<span class="tag">body</span>&gt;</p>
386 | 				</code></pre></div>
387 | 			</div>
388 | 
389 | 		</div>
390 | 		
391 | 	</div>
392 | 		
393 | </div>
394 | 
395 | <div id="footer">
396 | 	<div class="prjCopyright">
397 | 		<div class="prjLicense">MIT License</div>
398 | 		<div class="prjAuthor">Developed by vadimsva</div>
399 | 	</div>
400 | </div>
401 | 
402 | <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
403 | <script src="waitMe.js"></script>
404 | 
405 | <script>
406 | $(function(){
407 | 
408 | 	var current_effect = $('#waitMe_ex_effect').val();
409 | 
410 | 	$('#waitMe_ex').click(function(){
411 | 		run_waitMe($('.containerBlock > form'), 1, current_effect);
412 | 	});
413 | 	$('.waitMe_ex_close').click(function(){
414 | 		$('.containerBlock > form').waitMe('hide');
415 | 		$('#waitMe_ex2').waitMe('hide');
416 | 		$('#waitMe_ex3').waitMe('hide');
417 | 	});
418 | 
419 | 	$('#waitMe_ex_effect').change(function(){
420 | 		current_effect = $(this).val();
421 | 		run_waitMe($('.containerBlock > form'), 1, current_effect);
422 | 		run_waitMe($('#waitMe_ex2'), 2, current_effect);
423 | 		run_waitMe($('#waitMe_ex3'), 3, current_effect);
424 | 	});
425 | 	
426 | 	$('#waitMe_ex_effect').click(function(){
427 | 		current_effect = $(this).val();
428 | 	});
429 | 	
430 | 	function run_waitMe(el, num, effect){
431 | 		text = 'Please wait...';
432 | 		fontSize = '';
433 | 		switch (num) {
434 | 			case 1:
435 | 			maxSize = '';
436 | 			textPos = 'vertical';
437 | 			break;
438 | 			case 2:
439 | 			text = '';
440 | 			maxSize = 30;
441 | 			textPos = 'vertical';
442 | 			break;
443 | 			case 3:
444 | 			maxSize = 30;
445 | 			textPos = 'horizontal';
446 | 			fontSize = '18px';
447 | 			break;
448 | 		}
449 | 		el.waitMe({
450 | 			effect: effect,
451 | 			text: text,
452 | 			bg: 'rgba(255,255,255,0.7)',
453 | 			color: '#000',
454 | 			maxSize: maxSize,
455 | 			waitTime: -1,
456 | 			source: 'img.svg',
457 | 			textPos: textPos,
458 | 			fontSize: fontSize,
459 | 			onClose: function(el) {}
460 | 		});
461 | 	}
462 | 	
463 | 	$('#waitMe_ex2').click(function(){
464 | 		run_waitMe($(this), 2, current_effect);
465 | 	});
466 | 	
467 | 	$('#waitMe_ex3').click(function(){
468 | 		run_waitMe($(this), 3, current_effect);
469 | 	});
470 | 
471 | 	var current_body_effect = $('#waitMe_ex_body_effect').val();
472 | 	
473 | 	$('#waitMe_ex_body').click(function(){
474 | 		run_waitMe_body(current_body_effect);
475 | 	});
476 | 	
477 | 	$('#waitMe_ex_body_effect').change(function(){
478 | 		current_body_effect = $(this).val();
479 | 		run_waitMe_body(current_body_effect);
480 | 	});
481 | 	
482 | 	function run_waitMe_body(effect){
483 | 		$('body').addClass('waitMe_body');
484 | 		var img = '';
485 | 		var text = '';
486 | 		if(effect == 'img'){
487 | 			img = 'background:url(\'img.svg\')';
488 | 		} else if(effect == 'text'){
489 | 			text = 'Loading...'; 
490 | 		}
491 | 		var elem = $('<div class="waitMe_container ' + effect + '"><div style="' + img + '">' + text + '</div></div>');
492 | 		$('body').prepend(elem);
493 | 		
494 | 		setTimeout(function(){
495 | 			$('body.waitMe_body').addClass('hideMe');
496 | 			setTimeout(function(){
497 | 				$('body.waitMe_body').find('.waitMe_container:not([data-waitme_id])').remove();
498 | 				$('body.waitMe_body').removeClass('waitMe_body hideMe');
499 | 			},200);
500 | 		},4000);
501 | 	}
502 | 	
503 | });
504 | </script>
505 | 
506 | </body>
507 | </html>
508 | 


--------------------------------------------------------------------------------
/waitMe.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | waitMe - 1.19 [31.10.17]
  3 | Author: vadimsva
  4 | Github: https://github.com/vadimsva/waitMe
  5 | */
  6 | .waitMe_container:not(body) {transform:translateZ(0);backface-visibility:hidden}
  7 | body.waitMe_container .waitMe {position:fixed;height:100vh;transform:translateZ(0);backface-visibility:hidden}
  8 | body.waitMe_container .waitMe .waitMe_content {top:50%!important;transform:none!important}
  9 | .waitMe_container .waitMe {position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center;overflow:hidden;cursor:wait}
 10 | .waitMe_container .waitMe * {font-family:inherit;font-size:inherit;font-weight:initial;font-style:initial;line-height:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial}
 11 | .waitMe_container .waitMe .waitMe_content {position:absolute;left:0;right:0;top:50%;backface-visibility:hidden}
 12 | .waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_progress {display:inline-block;vertical-align:middle}
 13 | .waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_text {display:inline-block;margin:0 0 0 20px;vertical-align:middle}
 14 | .waitMe_container .waitMe .waitMe_progress {position:relative;font-size:0;line-height:0}
 15 | .waitMe_container .waitMe .waitMe_progress > div {animation-fill-mode:both;display:inline-block;transform:translateZ(0);backface-visibility:hidden}
 16 | .waitMe_container .waitMe .waitMe_text {position:relative;margin:20px 0 0}
 17 | 
 18 | /* before load animation */
 19 | body.waitMe_body {overflow:hidden;height:100%}
 20 | body.waitMe_body.hideMe {transition:opacity .2s ease-in-out;opacity:0}
 21 | body.waitMe_body .waitMe_container:not([data-waitme_id]) {position:fixed;z-index:9989;top:0;bottom:0;left:0;right:0;background:#fff}
 22 | body.waitMe_body .waitMe_container:not([data-waitme_id]) > div {animation-fill-mode:both;position:absolute}
 23 | body.waitMe_body .waitMe_container.progress > div {width:0;height:3px;top:0;left:0;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:progress_body 7s infinite ease-out}
 24 | body.waitMe_body .waitMe_container.working > div {width:10%;height:3px;top:0;left:-10%;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:working_body 2s infinite linear}
 25 | body.waitMe_body .waitMe_container.progress > div:after {content:'';position:absolute;top:0;bottom:60%;right:0;width:60px;border-radius:50%;opacity:.5;transform:rotate(3deg);box-shadow:#000 1px 0 6px 1px}
 26 | body.waitMe_body .waitMe_container.img > div {width:100%;height:100%;text-align:center;background-position:center!important;background-repeat:no-repeat!important}
 27 | body.waitMe_body .waitMe_container.text > div {width:100%;top:45%;text-align:center}
 28 | @keyframes progress_body {
 29 | 	0% {width:0}
 30 | 	100% {width:100%}
 31 | }
 32 | @keyframes working_body {
 33 | 	0% {left:-10%}
 34 | 	100% {left:100%}
 35 | }
 36 | 
 37 | 
 38 | /* bounce */
 39 | .waitMe_container .waitMe_progress.bounce > div {width:20px;height:20px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}
 40 | .waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1 {animation-delay:-.32s}
 41 | .waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2 {animation-delay:-.16s}
 42 | @keyframes bounce {
 43 | 	0%, 80%, 100% {transform:scale(0)}
 44 | 	40% {transform:scale(1)}
 45 | }
 46 | 
 47 | 
 48 | /* rotateplane */
 49 | .waitMe_container .waitMe_progress.rotateplane > div {width:30px;height:30px;animation:rotateplane 1.2s infinite ease-in-out;backface-visibility:visible}
 50 | @keyframes rotateplane {
 51 |   0% {transform:perspective(120px)}
 52 |   50% {transform:perspective(120px) rotateY(180deg)}
 53 |   100% {transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
 54 | }
 55 | 
 56 | 
 57 | /* stretch */
 58 | .waitMe_container .waitMe_progress.stretch {height:60px}
 59 | .waitMe_container .waitMe_progress.stretch > div {width:1px;height:100%;margin:0 4px;animation:stretch 1.2s infinite ease-in-out}
 60 | .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2 {animation-delay:-1.1s}
 61 | .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3 {animation-delay:-1s}
 62 | .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 {animation-delay:-.9s}
 63 | .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 {animation-delay:-.8s}
 64 | @keyframes stretch {
 65 |   0%, 40%, 100% {transform:scaleY(.4)}
 66 |   20% {transform:scaleY(1)}
 67 | }
 68 | 
 69 | 
 70 | /* orbit */
 71 | .waitMe_container .waitMe_progress.orbit {width:40px;height:40px;margin:auto;position:relative}
 72 | .waitMe_container .waitMe_progress.orbit > div {width:100%;height:100%;margin:auto;top:0;left:0;position:absolute;animation:orbit_rotate 2s infinite linear}
 73 | .waitMe_container .waitMe_progress.orbit > div > div {width:50%;height:50%;border-radius:50%;top:10%;left:10%;position:absolute;animation:orbit 2s infinite ease-in-out}
 74 | .waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 > div {top:auto;bottom:10%;left:auto;right:10%;animation-delay:-1s}
 75 | @keyframes orbit_rotate {
 76 | 	0% {transform:rotate(0deg)}
 77 | 	100% {transform:rotate(360deg)}
 78 | }
 79 | @keyframes orbit {
 80 |   0%, 100% {transform:scale(0)}
 81 | 	50% {transform:scale(1)}
 82 | }
 83 | 
 84 | 
 85 | /* roundBounce */
 86 | .waitMe_container .waitMe_progress.roundBounce {width:60px;height:60px;margin:auto}
 87 | .waitMe_container .waitMe_progress.roundBounce > div {width:24%;height:24%;border-radius:50%;position:absolute;animation:roundBounce 1.2s infinite ease-in-out}
 88 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem1 {top:0;left:0}
 89 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {top:0;right:0}
 90 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {bottom:0;right:0}
 91 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {bottom:0;left:0}
 92 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {top:-3%;left:50%;margin-top:-12%;margin-left:-12%}
 93 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {top:50%;right:-3%;margin-top:-12%;margin-right:-12%}
 94 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {bottom:-3%;left:50%;margin-bottom:-12%;margin-left:-12%}
 95 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {top:50%;left:-3%;margin-top:-12%;margin-left:-12%}
 96 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {top:0;right:0}
 97 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {bottom:0;right:0}
 98 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {bottom:0;left:0}
 99 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {top:0;left:0}
100 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {animation-delay:-1.1s}
101 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {animation-delay:-1s}
102 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {animation-delay:-.9s}
103 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {animation-delay:-.8s}
104 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {animation-delay:-.7s}
105 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {animation-delay:-.6s}
106 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {animation-delay:-.5s}
107 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {animation-delay:-.4s}
108 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {animation-delay:-.3s}
109 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {animation-delay:-.2s}
110 | .waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {animation-delay:-.1s}
111 | @keyframes roundBounce {
112 |   0%, 80%, 100% {transform:scale(0)}
113 | 	40% {transform:scale(1)}
114 | }
115 | 
116 | 
117 | /* win8 */
118 | .waitMe_container .waitMe_progress.win8 {width:40px;height:40px;margin:auto}
119 | .waitMe_container .waitMe_progress.win8 > div {width:100%;height:100%;opacity:0;position:absolute;margin:auto;left:0;right:0;transform:rotate(225deg);animation:win8 5.5s infinite}
120 | .waitMe_container .waitMe_progress.win8 > div > div {width:15%;height:15%;border-radius:50%;position:absolute}
121 | .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem2 {animation-delay:.24s}
122 | .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem3 {animation-delay:.48s}
123 | .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem4 {animation-delay:.72s}
124 | .waitMe_container .waitMe_progress.win8 .waitMe_progress_elem5 {animation-delay:.96s}
125 | @keyframes win8 {
126 |   0% {transform:rotate(225deg);animation-timing-function:ease-out} 
127 |   7% {opacity:1;transform:rotate(345deg);animation-timing-function:linear}
128 |   30% {transform:rotate(455deg);animation-timing-function:ease-in-out}
129 |   39% {transform:rotate(690deg);animation-timing-function:linear}
130 |   70% {opacity:1;transform:rotate(815deg);animation-timing-function:ease-out}
131 |   75% {transform:rotate(945deg);animation-timing-function:ease-out}
132 |   76% {opacity:0;transform:rotate(945deg)}
133 |   100% {opacity:0;transform:rotate(945deg)} 
134 | }
135 | 
136 | 
137 | /* win8_linear */
138 | .waitMe_container .waitMe_progress.win8_linear {margin:auto;width:150px;height:6px}
139 | .waitMe_container .waitMe_progress.win8_linear > div {width:100%;height:100%;left:0;opacity:0;position:absolute;animation:win8_linear 3s infinite}
140 | .waitMe_container .waitMe_progress.win8_linear > div > div {width:4%;height:100%;border-radius:50%}
141 | .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem2 {animation-delay:.3s}
142 | .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem3 {animation-delay:.6s}
143 | .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem4 {animation-delay:.9s}
144 | .waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem5 {animation-delay:1.2s}
145 | @keyframes win8_linear {
146 |   0%, 100% {transform:translateX(0);animation-timing-function:ease-out} 
147 |   10% {opacity:1;transform:translateX(33.333%);animation-timing-function:linear}
148 |   50% {opacity:1;transform:translateX(53.333%);animation-timing-function:ease-in-out}
149 |   60% {opacity:0;transform:translateX(86.666%)}
150 | }
151 | 
152 | 
153 | /* ios */
154 | .waitMe_container .waitMe_progress.ios {margin:auto;width:40px;height:40px}
155 | .waitMe_container .waitMe_progress.ios > div {width:10%;height:26%;position:absolute;left:44.5%;top:37%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);animation:ios 1s infinite linear}
156 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem1 {transform:rotate(0deg) translate(0, -142%);animation-delay:0s}
157 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem2 {transform:rotate(30deg) translate(0, -142%);animation-delay:-.9167s}
158 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem3 {transform:rotate(60deg) translate(0, -142%);animation-delay:-.833s}
159 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem4 {transform:rotate(90deg) translate(0, -142%);animation-delay:-.75s}
160 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem5 {transform:rotate(120deg) translate(0, -142%);animation-delay:-.667s}
161 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem6 {transform:rotate(150deg) translate(0, -142%);animation-delay:-.5833s}
162 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem7 {transform:rotate(180deg) translate(0, -142%);animation-delay:-.5s}
163 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem8 {transform:rotate(210deg) translate(0, -142%);animation-delay:-.41667s}
164 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem9 {transform:rotate(240deg) translate(0, -142%);animation-delay:-.333s}
165 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem10 {transform:rotate(270deg) translate(0, -142%);animation-delay:-.25s}
166 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem11 {transform:rotate(300deg) translate(0, -142%);animation-delay:-.1667s}
167 | .waitMe_container .waitMe_progress.ios .waitMe_progress_elem12 {transform:rotate(330deg) translate(0, -142%);animation-delay:-.0833s}
168 |  @keyframes ios {
169 | 	0% {opacity:1}
170 | 	100% {opacity:.25}
171 | }
172 | 
173 | 
174 | /* facebook */
175 | .waitMe_container .waitMe_progress.facebook {margin:auto}
176 | .waitMe_container .waitMe_progress.facebook > div {width:6px;height:25px;margin-left:3px;border-radius:20px;transform:scaleY(.7);opacity:.1;animation:facebook 1.3s infinite ease-in-out}
177 | .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem1 {animation-delay:.2s;transform:scaleY(.7)}
178 | .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem2 {animation-delay:.4s;transform:scaleY(.85)}
179 | .waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem3 {animation-delay:.6s;transform:scaleY(1)}
180 | @keyframes facebook {
181 | 	0% {transform:scaleY(.7);opacity:.1}
182 | 	50% {transform:scaleY(1);opacity:1}
183 | 	100% {transform:scaleY(.7);opacity:.1}
184 | }
185 | 
186 | 
187 | /* rotation */
188 | .waitMe_container .waitMe_progress.rotation > div {width:60px;height:60px;margin:auto;border-radius:100%;border-width:6px;border-style:solid;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;animation:rotation 1s infinite linear}
189 | @keyframes rotation {
190 | 	0% {transform:rotate(0deg)}
191 | 	100% {transform:rotate(360deg)}
192 | }
193 | 
194 | 
195 | /* timer */
196 | .waitMe_container .waitMe_progress.timer {width:40px;height:40px;margin:auto;border-width:2px;border-style:solid;border-radius:50%;box-sizing:border-box;position:relative;text-indent:-9999px}
197 | .waitMe_container .waitMe_progress.timer > .waitMe_progress_elem1,
198 | .waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {border-radius:3px;position:absolute;width:2px;height:48%;left:50%;top:50%;margin-left:-1px;margin-top:-1px;animation:timer 1.25s infinite linear;transform-origin:1px 1px}
199 | .waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {height:40%;animation:timer 15s infinite linear}
200 | @keyframes timer {
201 |   0% {transform:rotate(0deg)}
202 |   100% {transform:rotate(360deg)}
203 | }
204 | 
205 | 
206 | /* pulse */
207 | .waitMe_container .waitMe_progress.pulse {width:30px;height:30px;margin:auto;position:relative}
208 | .waitMe_container .waitMe_progress.pulse > div {margin:auto;top:0;left:0;right:0;bottom:0;border-width:3px;border-style:solid;border-radius:50%;position:absolute;opacity:0;animation:pulsate 1s infinite ease-out}
209 | @keyframes pulsate {
210 | 	0% {transform:scale(.1);opacity:0}
211 | 	50% {opacity:1}
212 | 	100% {transform:scale(1.2);opacity:0}
213 | }
214 | 
215 | 
216 | /* progressBar */
217 | .waitMe_container .waitMe_progress.progressBar {width:200px;height:20px;margin:auto;background:rgba(0,0,0,.1);padding:5px;border-radius:20px;line-height:0;max-width:100%}
218 | .waitMe_container .waitMe_progress.progressBar > div {width:100%;height:100%;overflow:hidden;border-radius:20px;background-size:50px 50px;box-shadow:inset 0 2px 9px rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.4);background-image:linear-gradient(-45deg, rgba(240,240,240,.4) 26%, transparent 25%, transparent 51%, rgba(240,240,240,.4) 50%, rgba(240,240,240,.4) 76%, transparent 75%, transparent);animation:progressBar 2s linear infinite}
219 | @keyframes progressBar {
220 |   0% {background-position:0 0}
221 |   100% {background-position:50px 50px}
222 | }
223 | 
224 | 
225 | /* bouncePulse */
226 | .waitMe_container .waitMe_progress.bouncePulse > div {width:20px;height:20px;margin-right:1px;display:inline-block;border-radius:50%;transform:scale(.5);animation:bouncePulse 1.4s infinite ease-in-out}
227 | .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem1,
228 | .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem3 {animation-delay:.1s}
229 | .waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem2 {animation-delay:.4s}
230 | @keyframes bouncePulse {
231 | 	0%, 80%, 100% {transform:scale(.5)}
232 | 	40% {transform:scale(1)}
233 | }
234 | 


--------------------------------------------------------------------------------
/waitMe.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | waitMe - 1.19 [31.10.17]
  3 | Author: vadimsva
  4 | Github: https://github.com/vadimsva/waitMe
  5 | */
  6 | (function($) {
  7 |   $.fn.waitMe = function(method) {
  8 |     return this.each(function() {
  9 | 
 10 |       var elem = $(this),
 11 | 			elemClass = 'waitMe',
 12 | 			waitMe_text,
 13 | 			effectObj,
 14 | 			effectElemCount,
 15 | 			createSubElem = false,
 16 | 			specificAttr = 'background-color',
 17 | 			addStyle = '',
 18 | 			effectElemHTML = '',
 19 | 			waitMeObj,
 20 | 			_options,
 21 | 			currentID;
 22 | 
 23 |       var methods = {
 24 |         init : function() {
 25 |           var _defaults = {
 26 |             effect: 'bounce',
 27 |             text: '',
 28 |             bg: 'rgba(255,255,255,0.7)',
 29 |             color: '#000',
 30 | 						maxSize: '',
 31 | 						waitTime: -1,
 32 | 						textPos: 'vertical',
 33 | 						fontSize: '',
 34 |             source: '',
 35 | 						onClose: function() {}
 36 |           };
 37 |           _options = $.extend(_defaults, method);
 38 | 
 39 |           currentID = new Date().getMilliseconds();
 40 |           waitMeObj = $('<div class="' + elemClass + '" data-waitme_id="' + currentID + '"></div>');
 41 | 
 42 |           switch (_options.effect) {
 43 |             case 'none':
 44 |               effectElemCount = 0;
 45 |               break;
 46 |             case 'bounce':
 47 |               effectElemCount = 3;
 48 |               break;
 49 |             case 'rotateplane':
 50 |               effectElemCount = 1;
 51 |               break;
 52 |             case 'stretch':
 53 |               effectElemCount = 5;
 54 |               break;
 55 |             case 'orbit':
 56 |               effectElemCount = 2;
 57 | 							createSubElem = true;
 58 |               break;
 59 |             case 'roundBounce':
 60 |               effectElemCount = 12;
 61 |               break;
 62 |             case 'win8':
 63 |               effectElemCount = 5;
 64 |               createSubElem = true;
 65 |               break;
 66 |             case 'win8_linear':
 67 |               effectElemCount = 5;
 68 |               createSubElem = true;
 69 |               break;
 70 |             case 'ios':
 71 |               effectElemCount = 12;
 72 |               break;
 73 |             case 'facebook':
 74 |               effectElemCount = 3;
 75 |               break;
 76 |             case 'rotation':
 77 |               effectElemCount = 1;
 78 |               specificAttr = 'border-color';
 79 |               break;
 80 |             case 'timer':
 81 |               effectElemCount = 2;
 82 | 							if ($.isArray(_options.color)) {
 83 | 								var color = _options.color[0];
 84 | 							} else {
 85 | 								var color = _options.color;
 86 | 							}
 87 |               addStyle = 'border-color:' + color;
 88 |               break;
 89 |             case 'pulse':
 90 |               effectElemCount = 1;
 91 |               specificAttr = 'border-color';
 92 |               break;
 93 |             case 'progressBar':
 94 |               effectElemCount = 1;
 95 |               break;
 96 |             case 'bouncePulse':
 97 |               effectElemCount = 3;
 98 |               break;
 99 |             case 'img':
100 |               effectElemCount = 1;
101 |               break;
102 |           }
103 | 
104 |           if (addStyle !== '') {
105 |             addStyle += ';';
106 |           }
107 | 					
108 |           if (effectElemCount > 0) {
109 |             if(_options.effect === 'img') {
110 | 							effectElemHTML = '<img src="' + _options.source + '">';
111 |             } else {
112 |               for (var i = 1; i <= effectElemCount; ++i) {
113 | 								if ($.isArray(_options.color)) {
114 | 									var color = _options.color[i];
115 | 									if (color == undefined) {
116 | 										color = '#000';
117 | 									}
118 | 								} else {
119 | 									var color = _options.color;
120 | 								}
121 |                 if (createSubElem) {
122 |                   effectElemHTML += '<div class="' + elemClass + '_progress_elem' + i + '"><div style="' + specificAttr +':' + color + '"></div></div>';
123 |                 } else {
124 |                   effectElemHTML += '<div class="' + elemClass + '_progress_elem' + i + '" style="' + specificAttr + ':' + color + '"></div>';
125 |                 }
126 |               }
127 |             }
128 |             effectObj = $('<div class="' + elemClass + '_progress ' + _options.effect + '" style="' + addStyle + '">' + effectElemHTML + '</div>');
129 |           }
130 | 
131 |           if (_options.text) {
132 | 						if ($.isArray(_options.color)) {
133 | 							var color = _options.color[0];
134 | 						} else {
135 | 							var color = _options.color;
136 | 						}
137 | 						if (_options.fontSize != '') {
138 | 							var size = 'font-size:'+_options.fontSize;
139 | 						} else {
140 | 							var size = '';
141 | 						}
142 |             waitMe_text = $('<div class="' + elemClass + '_text" style="color:' + color + ';' + size + '">' + _options.text + '</div>');
143 |           }
144 | 					var elemObj = elem.find('> .' + elemClass);
145 | 
146 |           if (elemObj) {
147 |             elemObj.remove();
148 |           }
149 |           var waitMeDivObj = $('<div class="' + elemClass + '_content ' + _options.textPos + '"></div>');
150 |           waitMeDivObj.append(effectObj, waitMe_text);
151 |           waitMeObj.append(waitMeDivObj);
152 |           if (elem[0].tagName == 'HTML') {
153 |             elem = $('body');
154 |           }
155 |           elem.addClass(elemClass + '_container').attr('data-waitme_id', currentID).append(waitMeObj);
156 | 					elemObj = elem.find('> .' + elemClass);
157 | 					var elemContentObj = elem.find('.' + elemClass + '_content');
158 |           elemObj.css({background: _options.bg});
159 | 					
160 | 					if (_options.maxSize !== '' && _options.effect != 'none') {
161 | 						var elemH = effectObj.outerHeight();
162 | 						var elemW = effectObj.outerWidth();
163 | 						var elemMax = elemH;
164 | 						if (_options.effect === 'img') {
165 | 							effectObj.css({height: _options.maxSize + 'px'});
166 | 							effectObj.find('>img').css({maxHeight: '100%'});
167 | 							elemContentObj.css({marginTop: - elemContentObj.outerHeight() / 2 + 'px'});
168 | 						} else {
169 | 							if (_options.maxSize < elemMax) {
170 | 								if (_options.effect == 'stretch') {
171 | 									effectObj.css({height:_options.maxSize + 'px', width:_options.maxSize + 'px'});
172 | 									effectObj.find('> div').css({margin: '0 5%'});
173 | 								} else {
174 | 									var zoom = _options.maxSize / elemMax - 0.2;
175 | 									var offset = '-50%';
176 | 									if (_options.effect == 'roundBounce') {
177 | 										offset = '-75%';
178 | 										if (_options.text) {
179 | 											offset = '75%';	
180 | 										}
181 | 									} else if (_options.effect == 'win8' || _options.effect == 'timer' || _options.effect == 'orbit') {
182 | 										offset = '-20%';
183 | 										if (_options.text) {
184 | 											offset = '20%';	
185 | 										}
186 | 									} else if (_options.effect == 'ios') {
187 | 										offset = '-15%';
188 | 										if (_options.text) {
189 | 											offset = '15%';
190 | 										}
191 | 									}
192 | 									if (_options.effect == 'rotation') {
193 | 										if (_options.text) {
194 | 											offset = '75%';	
195 | 										}
196 | 									}
197 | 									effectObj.css({transform: 'scale('+zoom+') translateX('+offset+')', whiteSpace:'nowrap'});
198 | 								}
199 | 								
200 | 							}
201 | 						}
202 | 					}
203 | 					elemContentObj.css({marginTop: - elemContentObj.outerHeight() / 2 + 'px'});
204 | 
205 | 					function setElTop(getTop) {
206 | 						elemContentObj.css({top: 'auto', transform: 'translateY(' + getTop + 'px) translateZ(0)'});
207 | 					}
208 |           if (elem.outerHeight() > $(window).height()) {
209 |             var sTop = $(window).scrollTop(),
210 |             elH = elemContentObj.outerHeight(),
211 |             elTop = elem.offset().top,
212 |             cH = elem.outerHeight(),
213 | 						getTop = sTop - elTop + $(window).height()/2;
214 | 						if (getTop < 0) {
215 | 							getTop = Math.abs(getTop);
216 | 						}
217 | 						if (getTop - elH >= 0 && getTop + elH <= cH) {
218 | 							if (elTop - sTop > $(window).height()/2) {
219 | 								getTop = elH;
220 | 							}
221 | 							setElTop(getTop);
222 | 						} else {
223 | 							if (sTop > elTop + cH - elH) {
224 | 								getTop = sTop - elTop - elH;
225 | 							} else {
226 | 								getTop = sTop - elTop + elH;
227 | 							}
228 | 							setElTop(getTop);
229 | 						}
230 |             $(document).scroll(function() {
231 |               var sTop = $(window).scrollTop(),
232 |               getTop = sTop - elTop + $(window).height()/2;
233 |               if (getTop - elH >= 0 && getTop + elH <= cH) {
234 | 								setElTop(getTop);
235 |               }
236 |             });
237 |           }
238 | 					
239 | 					if (_options.waitTime > 0) {
240 | 						setTimeout(function(){
241 | 							waitMeClose();
242 | 						}, _options.waitTime);
243 | 					}
244 | 					
245 | 					elemObj.on('destroyed', function() {
246 | 						if (_options.onClose && $.isFunction(_options.onClose)) {
247 | 							_options.onClose(elem);
248 | 						}
249 | 						elemObj.trigger('close', {el: elem});
250 | 					});
251 | 
252 | 					$.event.special.destroyed = {
253 | 						remove: function(o) {
254 | 							if (o.handler) {
255 | 								o.handler();
256 | 							}
257 | 						}
258 | 					};
259 | 					
260 | 					return elemObj;
261 |         },
262 |         hide : function() {
263 |           waitMeClose();
264 |         }
265 |       };
266 | 
267 |       function waitMeClose() {
268 |         var currentID = elem.attr('data-waitme_id');
269 |         elem.removeClass(elemClass + '_container').removeAttr('data-waitme_id');
270 |         elem.find('.' + elemClass + '[data-waitme_id="' + currentID + '"]').remove();
271 |       }
272 | 
273 |       if (methods[method]) {
274 |         return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
275 |       } else if (typeof method === 'object' || ! method) {
276 |         return methods.init.apply(this, arguments);
277 |       }
278 | 
279 |     });
280 | 
281 |   };
282 |   $(window).on('load', function(){
283 |     $('body.waitMe_body').addClass('hideMe');
284 |     setTimeout(function(){
285 |       $('body.waitMe_body').find('.waitMe_container:not([data-waitme_id])').remove();
286 |       $('body.waitMe_body').removeClass('waitMe_body hideMe');
287 |     },200);
288 |   });
289 | })(jQuery);
290 | 


--------------------------------------------------------------------------------
/waitMe.min.css:
--------------------------------------------------------------------------------
1 | /*
2 | waitMe - 1.19 [31.10.17]
3 | Author: vadimsva
4 | Github: https://github.com/vadimsva/waitMe
5 | */
6 | .waitMe_container:not(body),body.waitMe_container .waitMe{transform:translateZ(0);backface-visibility:hidden}body.waitMe_container .waitMe{position:fixed;height:100vh}body.waitMe_container .waitMe .waitMe_content{top:50%!important;transform:none!important}.waitMe_container .waitMe{position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center;overflow:hidden;cursor:wait}.waitMe_container .waitMe *{font-family:inherit;font-size:inherit;font-weight:initial;font-style:initial;line-height:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial}.waitMe_container .waitMe .waitMe_content{position:absolute;left:0;right:0;top:50%;backface-visibility:hidden}.waitMe_container .waitMe .waitMe_content.horizontal>.waitMe_progress{display:inline-block;vertical-align:middle}.waitMe_container .waitMe .waitMe_content.horizontal>.waitMe_text{display:inline-block;margin:0 0 0 20px;vertical-align:middle}.waitMe_container .waitMe .waitMe_progress{position:relative;font-size:0;line-height:0}.waitMe_container .waitMe .waitMe_progress>div{animation-fill-mode:both;display:inline-block;transform:translateZ(0);backface-visibility:hidden}.waitMe_container .waitMe .waitMe_text{position:relative;margin:20px 0 0}body.waitMe_body{overflow:hidden;height:100%}body.waitMe_body.hideMe{transition:opacity .2s ease-in-out;opacity:0}body.waitMe_body .waitMe_container:not([data-waitme_id]){position:fixed;z-index:9989;top:0;bottom:0;left:0;right:0;background:#fff}body.waitMe_body .waitMe_container:not([data-waitme_id])>div{animation-fill-mode:both;position:absolute}body.waitMe_body .waitMe_container.progress>div{width:0;height:3px;top:0;left:0;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:progress_body 7s infinite ease-out}body.waitMe_body .waitMe_container.working>div{width:10%;height:3px;top:0;left:-10%;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:working_body 2s infinite linear}body.waitMe_body .waitMe_container.progress>div:after{content:'';position:absolute;top:0;bottom:60%;right:0;width:60px;border-radius:50%;opacity:.5;transform:rotate(3deg);box-shadow:#000 1px 0 6px 1px}body.waitMe_body .waitMe_container.img>div{width:100%;height:100%;text-align:center;background-position:center!important;background-repeat:no-repeat!important}body.waitMe_body .waitMe_container.text>div{width:100%;top:45%;text-align:center}@keyframes progress_body{0%{width:0}100%{width:100%}}@keyframes working_body{0%{left:-10%}100%{left:100%}}.waitMe_container .waitMe_progress.bounce>div{width:20px;height:20px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1{animation-delay:-.32s}.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2{animation-delay:-.16s}@keyframes bounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.waitMe_container .waitMe_progress.rotateplane>div{width:30px;height:30px;animation:rotateplane 1.2s infinite ease-in-out;backface-visibility:visible}@keyframes rotateplane{0%{transform:perspective(120px)}50%{transform:perspective(120px) rotateY(180deg)}100%{transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}.waitMe_container .waitMe_progress.stretch{height:60px}.waitMe_container .waitMe_progress.stretch>div{width:1px;height:100%;margin:0 4px;animation:stretch 1.2s infinite ease-in-out}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2{animation-delay:-1.1s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3{animation-delay:-1s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4{animation-delay:-.9s}.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5{animation-delay:-.8s}@keyframes stretch{0%,100%,40%{transform:scaleY(.4)}20%{transform:scaleY(1)}}.waitMe_container .waitMe_progress.orbit{width:40px;height:40px;margin:auto;position:relative}.waitMe_container .waitMe_progress.orbit>div{width:100%;height:100%;margin:auto;top:0;left:0;position:absolute;animation:orbit_rotate 2s infinite linear}.waitMe_container .waitMe_progress.orbit>div>div{width:50%;height:50%;border-radius:50%;top:10%;left:10%;position:absolute;animation:orbit 2s infinite ease-in-out}.waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2>div{top:auto;bottom:10%;left:auto;right:10%;animation-delay:-1s}@keyframes orbit_rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes orbit{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.waitMe_container .waitMe_progress.roundBounce{width:60px;height:60px;margin:auto}.waitMe_container .waitMe_progress.roundBounce>div{width:24%;height:24%;border-radius:50%;position:absolute;animation:roundBounce 1.2s infinite ease-in-out}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem1{top:0;left:0}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2{top:0;right:0}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3{bottom:0;right:0}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4{bottom:0;left:0}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5{top:-3%;left:50%;margin-top:-12%;margin-left:-12%;animation-delay:-1.1s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6{top:50%;right:-3%;margin-top:-12%;margin-right:-12%}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7{bottom:-3%;left:50%;margin-bottom:-12%;margin-left:-12%}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8{top:50%;left:-3%;margin-top:-12%;margin-left:-12%}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9{top:0;right:0;animation-delay:-1s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2{animation-delay:-.9s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6{animation-delay:-.8s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10{bottom:0;right:0;animation-delay:-.7s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3{animation-delay:-.6s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7{animation-delay:-.5s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11{bottom:0;left:0;animation-delay:-.4s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4{animation-delay:-.3s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8{animation-delay:-.2s}.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12{top:0;left:0;animation-delay:-.1s}@keyframes roundBounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.waitMe_container .waitMe_progress.win8{width:40px;height:40px;margin:auto}.waitMe_container .waitMe_progress.win8>div{width:100%;height:100%;opacity:0;position:absolute;margin:auto;left:0;right:0;transform:rotate(225deg);animation:win8 5.5s infinite}.waitMe_container .waitMe_progress.win8>div>div{width:15%;height:15%;border-radius:50%;position:absolute}.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem2{animation-delay:.24s}.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem3{animation-delay:.48s}.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem4{animation-delay:.72s}.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem5{animation-delay:.96s}@keyframes win8{0%{transform:rotate(225deg);animation-timing-function:ease-out}7%{opacity:1;transform:rotate(345deg);animation-timing-function:linear}30%{transform:rotate(455deg);animation-timing-function:ease-in-out}39%{transform:rotate(690deg);animation-timing-function:linear}70%{opacity:1;transform:rotate(815deg);animation-timing-function:ease-out}75%{transform:rotate(945deg);animation-timing-function:ease-out}100%,76%{opacity:0;transform:rotate(945deg)}}.waitMe_container .waitMe_progress.win8_linear{margin:auto;width:150px;height:6px}.waitMe_container .waitMe_progress.win8_linear>div{width:100%;height:100%;left:0;opacity:0;position:absolute;animation:win8_linear 3s infinite}.waitMe_container .waitMe_progress.win8_linear>div>div{width:4%;height:100%;border-radius:50%}.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem2{animation-delay:.3s}.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem3{animation-delay:.6s}.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem4{animation-delay:.9s}.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem5{animation-delay:1.2s}@keyframes win8_linear{0%,100%{transform:translateX(0);animation-timing-function:ease-out}10%{opacity:1;transform:translateX(33.333%);animation-timing-function:linear}50%{opacity:1;transform:translateX(53.333%);animation-timing-function:ease-in-out}60%{opacity:0;transform:translateX(86.666%)}}.waitMe_container .waitMe_progress.ios{margin:auto;width:40px;height:40px}.waitMe_container .waitMe_progress.ios>div{width:10%;height:26%;position:absolute;left:44.5%;top:37%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);animation:ios 1s infinite linear}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem1{transform:rotate(0) translate(0,-142%);animation-delay:0s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem2{transform:rotate(30deg) translate(0,-142%);animation-delay:-.9167s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem3{transform:rotate(60deg) translate(0,-142%);animation-delay:-.833s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem4{transform:rotate(90deg) translate(0,-142%);animation-delay:-.75s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem5{transform:rotate(120deg) translate(0,-142%);animation-delay:-.667s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem6{transform:rotate(150deg) translate(0,-142%);animation-delay:-.5833s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem7{transform:rotate(180deg) translate(0,-142%);animation-delay:-.5s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem8{transform:rotate(210deg) translate(0,-142%);animation-delay:-.41667s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem9{transform:rotate(240deg) translate(0,-142%);animation-delay:-.333s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem10{transform:rotate(270deg) translate(0,-142%);animation-delay:-.25s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem11{transform:rotate(300deg) translate(0,-142%);animation-delay:-.1667s}.waitMe_container .waitMe_progress.ios .waitMe_progress_elem12{transform:rotate(330deg) translate(0,-142%);animation-delay:-.0833s}@keyframes ios{0%{opacity:1}100%{opacity:.25}}.waitMe_container .waitMe_progress.facebook{margin:auto}.waitMe_container .waitMe_progress.facebook>div{width:6px;height:25px;margin-left:3px;border-radius:20px;transform:scaleY(.7);opacity:.1;animation:facebook 1.3s infinite ease-in-out}.waitMe_container .waitMe_progress.facebook>.waitMe_progress_elem1{animation-delay:.2s;transform:scaleY(.7)}.waitMe_container .waitMe_progress.facebook>.waitMe_progress_elem2{animation-delay:.4s;transform:scaleY(.85)}.waitMe_container .waitMe_progress.facebook>.waitMe_progress_elem3{animation-delay:.6s;transform:scaleY(1)}@keyframes facebook{0%,100%{transform:scaleY(.7);opacity:.1}50%{transform:scaleY(1);opacity:1}}.waitMe_container .waitMe_progress.rotation>div{width:60px;height:60px;margin:auto;border-radius:100%;border-width:6px;border-style:solid;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;animation:rotation 1s infinite linear}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.waitMe_container .waitMe_progress.timer{width:40px;height:40px;margin:auto;border-width:2px;border-style:solid;border-radius:50%;box-sizing:border-box;position:relative;text-indent:-9999px}.waitMe_container .waitMe_progress.timer>.waitMe_progress_elem1,.waitMe_container .waitMe_progress.timer>.waitMe_progress_elem2{border-radius:3px;position:absolute;width:2px;height:48%;left:50%;top:50%;margin-left:-1px;margin-top:-1px;animation:timer 1.25s infinite linear;transform-origin:1px 1px}.waitMe_container .waitMe_progress.timer>.waitMe_progress_elem2{height:40%;animation:timer 15s infinite linear}@keyframes timer{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.waitMe_container .waitMe_progress.pulse{width:30px;height:30px;margin:auto;position:relative}.waitMe_container .waitMe_progress.pulse>div{margin:auto;top:0;left:0;right:0;bottom:0;border-width:3px;border-style:solid;border-radius:50%;position:absolute;opacity:0;animation:pulsate 1s infinite ease-out}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}.waitMe_container .waitMe_progress.progressBar{width:200px;height:20px;margin:auto;background:rgba(0,0,0,.1);padding:5px;border-radius:20px;line-height:0;max-width:100%}.waitMe_container .waitMe_progress.progressBar>div{width:100%;height:100%;overflow:hidden;border-radius:20px;background-size:50px 50px;box-shadow:inset 0 2px 9px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.4);background-image:linear-gradient(-45deg,rgba(240,240,240,.4) 26%,transparent 25%,transparent 51%,rgba(240,240,240,.4) 50%,rgba(240,240,240,.4) 76%,transparent 75%,transparent);animation:progressBar 2s linear infinite}@keyframes progressBar{0%{background-position:0 0}100%{background-position:50px 50px}}.waitMe_container .waitMe_progress.bouncePulse>div{width:20px;height:20px;margin-right:1px;display:inline-block;border-radius:50%;transform:scale(.5);animation:bouncePulse 1.4s infinite ease-in-out}.waitMe_container .waitMe_progress.bouncePulse>.waitMe_progress_elem1,.waitMe_container .waitMe_progress.bouncePulse>.waitMe_progress_elem3{animation-delay:.1s}.waitMe_container .waitMe_progress.bouncePulse>.waitMe_progress_elem2{animation-delay:.4s}@keyframes bouncePulse{0%,100%,80%{transform:scale(.5)}40%{transform:scale(1)}}
7 | 


--------------------------------------------------------------------------------
/waitMe.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | waitMe - 1.19 [31.10.17]
 3 | Author: vadimsva
 4 | Github: https://github.com/vadimsva/waitMe
 5 | */
 6 | (function(b){b.fn.waitMe=function(p){return this.each(function(){function y(){var a=f.attr("data-waitme_id");f.removeClass("waitMe_container").removeAttr("data-waitme_id");f.find('.waitMe[data-waitme_id="'+a+'"]').remove()}var f=b(this),z,g,e,r=!1,t="background-color",u="",q="",v,a,w,n={init:function(){function n(a){l.css({top:"auto",transform:"translateY("+a+"px) translateZ(0)"})}a=b.extend({effect:"bounce",text:"",bg:"rgba(255,255,255,0.7)",color:"#000",maxSize:"",waitTime:-1,textPos:"vertical",
 7 | fontSize:"",source:"",onClose:function(){}},p);w=(new Date).getMilliseconds();v=b('<div class="waitMe" data-waitme_id="'+w+'"></div>');switch(a.effect){case "none":e=0;break;case "bounce":e=3;break;case "rotateplane":e=1;break;case "stretch":e=5;break;case "orbit":e=2;r=!0;break;case "roundBounce":e=12;break;case "win8":e=5;r=!0;break;case "win8_linear":e=5;r=!0;break;case "ios":e=12;break;case "facebook":e=3;break;case "rotation":e=1;t="border-color";break;case "timer":e=2;var c=b.isArray(a.color)?
 8 | a.color[0]:a.color;u="border-color:"+c;break;case "pulse":e=1;t="border-color";break;case "progressBar":e=1;break;case "bouncePulse":e=3;break;case "img":e=1}""!==u&&(u+=";");if(0<e){if("img"===a.effect)q='<img src="'+a.source+'">';else for(var d=1;d<=e;++d)b.isArray(a.color)?(c=a.color[d],void 0==c&&(c="#000")):c=a.color,q=r?q+('<div class="waitMe_progress_elem'+d+'"><div style="'+t+":"+c+'"></div></div>'):q+('<div class="waitMe_progress_elem'+d+'" style="'+t+":"+c+'"></div>');g=b('<div class="waitMe_progress '+
 9 | a.effect+'" style="'+u+'">'+q+"</div>")}a.text&&(c=b.isArray(a.color)?a.color[0]:a.color,z=b('<div class="waitMe_text" style="color:'+c+";"+(""!=a.fontSize?"font-size:"+a.fontSize:"")+'">'+a.text+"</div>"));var k=f.find("> .waitMe");k&&k.remove();c=b('<div class="waitMe_content '+a.textPos+'"></div>');c.append(g,z);v.append(c);"HTML"==f[0].tagName&&(f=b("body"));f.addClass("waitMe_container").attr("data-waitme_id",w).append(v);k=f.find("> .waitMe");var l=f.find(".waitMe_content");k.css({background:a.bg});
10 | ""!==a.maxSize&&"none"!=a.effect&&(c=g.outerHeight(),g.outerWidth(),"img"===a.effect?(g.css({height:a.maxSize+"px"}),g.find(">img").css({maxHeight:"100%"}),l.css({marginTop:-l.outerHeight()/2+"px"})):a.maxSize<c&&("stretch"==a.effect?(g.css({height:a.maxSize+"px",width:a.maxSize+"px"}),g.find("> div").css({margin:"0 5%"})):(c=a.maxSize/c-.2,d="-50%","roundBounce"==a.effect?(d="-75%",a.text&&(d="75%")):"win8"==a.effect||"timer"==a.effect||"orbit"==a.effect?(d="-20%",a.text&&(d="20%")):"ios"==a.effect&&
11 | (d="-15%",a.text&&(d="15%")),"rotation"==a.effect&&a.text&&(d="75%"),g.css({transform:"scale("+c+") translateX("+d+")",whiteSpace:"nowrap"}))));l.css({marginTop:-l.outerHeight()/2+"px"});if(f.outerHeight()>b(window).height()){c=b(window).scrollTop();var h=l.outerHeight(),m=f.offset().top,x=f.outerHeight();d=c-m+b(window).height()/2;0>d&&(d=Math.abs(d));0<=d-h&&d+h<=x?m-c>b(window).height()/2&&(d=h):d=c>m+x-h?c-m-h:c-m+h;n(d);b(document).scroll(function(){var a=b(window).scrollTop()-m+b(window).height()/
12 | 2;0<=a-h&&a+h<=x&&n(a)})}0<a.waitTime&&setTimeout(function(){y()},a.waitTime);k.on("destroyed",function(){if(a.onClose&&b.isFunction(a.onClose))a.onClose(f);k.trigger("close",{el:f})});b.event.special.destroyed={remove:function(a){a.handler&&a.handler()}};return k},hide:function(){y()}};if(n[p])return n[p].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof p||!p)return n.init.apply(this,arguments)})};b(window).on("load",function(){b("body.waitMe_body").addClass("hideMe");setTimeout(function(){b("body.waitMe_body").find(".waitMe_container:not([data-waitme_id])").remove();
13 | b("body.waitMe_body").removeClass("waitMe_body hideMe")},200)})})(jQuery);
14 | 


--------------------------------------------------------------------------------