PluginProbe
LoftLoader / 2.0.0
LoftLoader v2.0.0
trunk 1.0.0 1.0.1 1.0.2 2.0.0 2.1.0 2.1.1 2.1.10 2.1.11 2.1.12 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 2.2.0 2.2.1 2.2.2 2.3 2.3.1 2.3.2 2.3.3 All 34 releases
loftloader / assets / css / loftloader.css

loftloader.css in LoftLoader 2.0.0, at assets/css/loftloader.css

537 lines 15.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * LoftLoader Lite Frontend Style
3 *
4 * Plugin Name: LoftLoader
5 * Plugin URI: http://www.loftocean.com/loftloader
6 * Author: Kaylolo Yinxi Chen @Loft.Ocean
7 * Author URI: http://www.loftocean.com
8 * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9 * Version: 2.0
10 */
11 @-webkit-keyframes spinReturn {
12 0% {
13 -webkit-transform: rotate(0deg); }
14 25% {
15 -webkit-transform: rotate(225deg); }
16 50% {
17 -webkit-transform: rotate(180deg); }
18 75% {
19 -webkit-transform: rotate(405deg); }
20 100% {
21 -webkit-transform: rotate(360deg); } }
22 @keyframes spinReturn {
23 0% {
24 transform: rotate(0deg); }
25 25% {
26 transform: rotate(225deg); }
27 50% {
28 transform: rotate(180deg); }
29 75% {
30 transform: rotate(405deg); }
31 100% {
32 transform: rotate(360deg); } }
33 @-webkit-keyframes lightUp {
34 0% {
35 opacity: 0.2; }
36 40% {
37 opacity: 1; }
38 60% {
39 opacity: 0.2; }
40 100% {
41 opacity: 0.2; } }
42 @keyframes lightUp {
43 0% {
44 opacity: 0.2; }
45 40% {
46 opacity: 1; }
47 60% {
48 opacity: 0.2; }
49 100% {
50 opacity: 0.2; } }
51 @-webkit-keyframes wave {
52 0% {
53 -webkit-transform: scaleY(1); }
54 40% {
55 -webkit-transform: scaleY(0.1); }
56 80% {
57 -webkit-transform: scaleY(1); }
58 100% {
59 -webkit-transform: scaleY(1); } }
60 @keyframes wave {
61 0% {
62 transform: scaleY(1); }
63 40% {
64 transform: scaleY(0.1); }
65 80% {
66 transform: scaleY(1); }
67 100% {
68 transform: scaleY(1); } }
69 @-webkit-keyframes drawframeTop {
70 0% {
71 -webkit-transform: scaleX(1);
72 transform-origin: 100% 0%; }
73 12.5% {
74 -webkit-transform: scaleX(0);
75 transform-origin: 100% 0%; }
76 50% {
77 -webkit-transform: scaleX(0);
78 transform-origin: 0% 0%; }
79 62.5% {
80 -webkit-transform: scaleX(1);
81 transform-origin: 0% 0%; }
82 100% {
83 -webkit-transform: scaleX(1);
84 transform-origin: 100% 0%; } }
85 @keyframes drawframeTop {
86 0% {
87 transform: scaleX(1);
88 transform-origin: 100% 0%; }
89 12.5% {
90 transform: scaleX(0);
91 transform-origin: 100% 0%; }
92 50% {
93 transform: scaleX(0);
94 transform-origin: 0% 0%; }
95 62.5% {
96 transform: scaleX(1);
97 transform-origin: 0% 0%; }
98 100% {
99 transform: scaleX(1);
100 transform-origin: 100% 0%; } }
101 @-webkit-keyframes drawframeBottom {
102 0% {
103 -webkit-transform: scaleX(1);
104 transform-origin: 0% 0%; }
105 12.5% {
106 -webkit-transform: scaleX(0);
107 transform-origin: 0% 0%; }
108 50% {
109 -webkit-transform: scaleX(0);
110 transform-origin: 100% 0%; }
111 62.5% {
112 -webkit-transform: scaleX(1);
113 transform-origin: 100% 0%; }
114 100% {
115 -webkit-transform: scaleX(1);
116 transform-origin: 0% 0%; } }
117 @keyframes drawframeBottom {
118 0% {
119 transform: scaleX(1);
120 transform-origin: 0% 0%; }
121 12.5% {
122 transform: scaleX(0);
123 transform-origin: 0% 0%; }
124 50% {
125 transform: scaleX(0);
126 transform-origin: 100% 0%; }
127 62.5% {
128 transform: scaleX(1);
129 transform-origin: 100% 0%; }
130 100% {
131 transform: scaleX(1);
132 transform-origin: 0% 0%; } }
133 @-webkit-keyframes drawframeRight {
134 0% {
135 -webkit-transform: scaleY(1);
136 transform-origin: 0% 100%; }
137 12.5% {
138 -webkit-transform: scaleY(0);
139 transform-origin: 0% 100%; }
140 50% {
141 -webkit-transform: scaleY(0);
142 transform-origin: 0% 0%; }
143 62.5% {
144 -webkit-transform: scaleY(1);
145 transform-origin: 0% 0%; }
146 100% {
147 -webkit-transform: scaleY(1);
148 transform-origin: 0% 100%; } }
149 @keyframes drawframeRight {
150 0% {
151 transform: scaleY(1);
152 transform-origin: 0% 100%; }
153 12.5% {
154 transform: scaleY(0);
155 transform-origin: 0% 100%; }
156 50% {
157 transform: scaleY(0);
158 transform-origin: 0% 0%; }
159 62.5% {
160 transform: scaleY(1);
161 transform-origin: 0% 0%; }
162 100% {
163 transform: scaleY(1);
164 transform-origin: 0% 100%; } }
165 @-webkit-keyframes drawframeLeft {
166 0% {
167 -webkit-transform: scaleY(1);
168 transform-origin: 0% 0%; }
169 12.5% {
170 -webkit-transform: scaleY(0);
171 transform-origin: 0% 0%; }
172 50% {
173 -webkit-transform: scaleY(0);
174 transform-origin: 0% 100%; }
175 62.5% {
176 -webkit-transform: scaleY(1);
177 transform-origin: 0% 100%; }
178 100% {
179 -webkit-transform: scaleY(1);
180 transform-origin: 0% 0%; } }
181 @keyframes drawframeLeft {
182 0% {
183 transform: scaleY(1);
184 transform-origin: 0% 0%; }
185 12.5% {
186 transform: scaleY(0);
187 transform-origin: 0% 0%; }
188 50% {
189 transform: scaleY(0);
190 transform-origin: 0% 100%; }
191 62.5% {
192 transform: scaleY(1);
193 transform-origin: 0% 100%; }
194 100% {
195 transform: scaleY(1);
196 transform-origin: 0% 0%; } }
197 @-webkit-keyframes imgLoading {
198 0% {
199 height: 0%;
200 opacity: 1; }
201 95% {
202 height: 100%;
203 opacity: 1; }
204 100% {
205 height: 100%;
206 opacity: 0; } }
207 @keyframes imgLoading {
208 0% {
209 height: 0%;
210 opacity: 1; }
211 95% {
212 height: 100%;
213 opacity: 1; }
214 100% {
215 height: 100%;
216 opacity: 0; } }
217 html,
218 body {
219 opacity: 1 !important; }
220
221 #loftloader-wrapper {
222 position: fixed;
223 top: 0;
224 left: 0;
225 -webkit-transform: translateX(0);
226 -ms-transform: translateX(0);
227 transform: translateX(0);
228 z-index: 999999;
229 width: 100%;
230 height: 100%;
231 background: transparent !important; }
232 .loaded #loftloader-wrapper {
233 -webkit-transform: translateX(-100%);
234 -ms-transform: translateX(-100%);
235 transform: translateX(-100%);
236 visibility: hidden;
237 pointer-events: none;
238 overflow: hidden;
239 transition: all;
240 transition-delay: 1s; }
241 .loaded #loftloader-wrapper.slide-vertical {
242 -webkit-transform: translate(-100%, 0);
243 -ms-transform: translate(-100%, 0);
244 transform: translate(-100%, 0); }
245 .loaded #loftloader-wrapper #loader {
246 opacity: 0;
247 transition: all 0.3s ease-out; }
248 #loftloader-wrapper .loader-inner {
249 position: absolute;
250 top: 50%;
251 left: 50%;
252 -webkit-transform: translate(-50%, -50%);
253 -ms-transform: translate(-50%, -50%);
254 transform: translate(-50%, -50%);
255 z-index: 1001;
256 text-align: center;
257 transition: all 0s;
258 font-size: 0; }
259 #loftloader-wrapper .loader-inner #loader {
260 position: relative;
261 z-index: 1002;
262 display: inline-block;
263 margin: 0 auto;
264 color: #248ACC; }
265 #loftloader-wrapper .loader-section {
266 position: fixed;
267 z-index: 999;
268 width: 50%;
269 height: 100%;
270 background: #000;
271 opacity: 0.95;
272 transition: all 0s;
273 will-change: transform; }
274 #loftloader-wrapper .loader-section.section-fade {
275 top: 0;
276 left: 0;
277 width: 100%;
278 will-change: opacity; }
279 .loaded #loftloader-wrapper .loader-section.section-fade {
280 opacity: 0 !important;
281 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
282 #loftloader-wrapper .loader-section.section-slide-up {
283 top: 0;
284 left: 0;
285 width: 100%; }
286 .loaded #loftloader-wrapper .loader-section.section-slide-up {
287 -webkit-transform: translateY(-100%);
288 -ms-transform: translateY(-100%);
289 transform: translateY(-100%);
290 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
291 #loftloader-wrapper .loader-section.section-left, #loftloader-wrapper .loader-section.section-right {
292 top: 0; }
293 #loftloader-wrapper .loader-section.section-left {
294 left: 0; }
295 .loaded #loftloader-wrapper .loader-section.section-left {
296 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
297 -webkit-transform: translateX(-100%);
298 -ms-transform: translateX(-100%);
299 transform: translateX(-100%); }
300 #loftloader-wrapper .loader-section.section-right {
301 right: 0; }
302 .loaded #loftloader-wrapper .loader-section.section-right {
303 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
304 -webkit-transform: translateX(100%);
305 -ms-transform: translateX(100%);
306 transform: translateX(100%); }
307 #loftloader-wrapper .loader-section.section-up, #loftloader-wrapper .loader-section.section-down {
308 left: 0;
309 width: 100%;
310 height: 50%; }
311 #loftloader-wrapper .loader-section.section-up {
312 top: 0; }
313 .loaded #loftloader-wrapper .loader-section.section-up {
314 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
315 -webkit-transform: translateY(-100%);
316 -ms-transform: translateY(-100%);
317 transform: translateY(-100%); }
318 #loftloader-wrapper .loader-section.section-down {
319 bottom: 0; }
320 .loaded #loftloader-wrapper .loader-section.section-down {
321 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
322 -webkit-transform: translateY(100%);
323 -ms-transform: translateY(100%);
324 transform: translateY(100%); }
325
326 /* ==========================================================================
327 Loading - Spinning Sun
328 ========================================================================== */
329 #loftloader-wrapper.pl-sun #loader {
330 width: 50px;
331 height: 50px; }
332 #loftloader-wrapper.pl-sun #loader span {
333 position: absolute;
334 top: 0;
335 left: 0;
336 display: block;
337 width: 50px;
338 height: 50px;
339 background: currentColor;
340 opacity: 0.9;
341 transform-origin: 50% 50%;
342 -webkit-animation: spinReturn 4s ease infinite;
343 animation: spinReturn 4s ease infinite; }
344 #loftloader-wrapper.pl-sun #loader span:before {
345 position: absolute;
346 top: 0;
347 left: 0;
348 display: block;
349 width: 100%;
350 height: 100%;
351 background: inherit;
352 opacity: 0.9;
353 content: "";
354 transform-origin: 50% 50%;
355 -webkit-transform: rotate(45deg);
356 -ms-transform: rotate(45deg);
357 transform: rotate(45deg); }
358
359 /* ==========================================================================
360 Loading - Luminous Circles
361 ========================================================================== */
362 #loftloader-wrapper.pl-circles #loader {
363 width: 100px;
364 height: 60px; }
365 #loftloader-wrapper.pl-circles #loader span, #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {
366 position: absolute;
367 display: block;
368 width: 10px;
369 height: 10px;
370 border-radius: 50%;
371 opacity: 0.2;
372 background: currentColor; }
373 #loftloader-wrapper.pl-circles #loader span {
374 top: 50%;
375 left: 50%;
376 -webkit-transform: translate(-50%, -50%);
377 -ms-transform: translate(-50%, -50%);
378 transform: translate(-50%, -50%);
379 -webkit-animation: lightUp 1.5s linear infinite 0.5s;
380 animation: lightUp 1.5s linear infinite 0.5s; }
381 #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {
382 content: "";
383 top: 50%;
384 -webkit-transform: translate(0, -50%);
385 -ms-transform: translate(0, -50%);
386 transform: translate(0, -50%); }
387 #loftloader-wrapper.pl-circles #loader:before {
388 left: 0;
389 -webkit-animation: lightUp 1.5s linear infinite;
390 animation: lightUp 1.5s linear infinite; }
391 #loftloader-wrapper.pl-circles #loader:after {
392 right: 0;
393 -webkit-animation: lightUp 1.5s linear infinite 1s;
394 animation: lightUp 1.5s linear infinite 1s; }
395
396 /* ==========================================================================
397 Loading - Wave
398 ========================================================================== */
399 #loftloader-wrapper.pl-wave #loader {
400 width: 60px;
401 height: 30px; }
402 #loftloader-wrapper.pl-wave #loader span, #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {
403 position: relative;
404 display: inline-block;
405 width: 6px;
406 height: 100%;
407 background: currentColor; }
408 #loftloader-wrapper.pl-wave #loader span {
409 margin: 0 16px;
410 -webkit-animation: wave 0.9s linear infinite 0.3s;
411 animation: wave 0.9s linear infinite 0.3s; }
412 #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {
413 content: ""; }
414 #loftloader-wrapper.pl-wave #loader:before {
415 -webkit-animation: wave 0.9s linear infinite;
416 animation: wave 0.9s linear infinite; }
417 #loftloader-wrapper.pl-wave #loader:after {
418 -webkit-animation: wave 0.9s linear infinite 0.6s;
419 animation: wave 0.9s linear infinite 0.6s; }
420
421 /* ==========================================================================
422 Loading - Spinning Square
423 ========================================================================== */
424 #loftloader-wrapper.pl-square #loader {
425 width: 50px;
426 height: 50px;
427 transform-origin: 50% 50%;
428 -webkit-animation: spinReturn 4s ease infinite;
429 animation: spinReturn 4s ease infinite; }
430 #loftloader-wrapper.pl-square #loader span {
431 position: absolute;
432 top: 0;
433 left: 0;
434 display: block;
435 width: 100%;
436 height: 100%;
437 border: 4px solid currentColor;
438 box-sizing: border-box;
439 transform-origin: 50% 50%;
440 -webkit-transform: rotate(45deg);
441 -ms-transform: rotate(45deg);
442 transform: rotate(45deg); }
443
444 /* ==========================================================================
445 Loading - Drawing Frame
446 ========================================================================== */
447 #loftloader-wrapper.pl-frame #loader {
448 width: 80px;
449 height: 80px;
450 max-width: 90vw; }
451 #loftloader-wrapper.pl-frame #loader:before, #loftloader-wrapper.pl-frame #loader:after {
452 position: absolute;
453 width: 100%;
454 height: 4px;
455 background: currentColor;
456 content: ""; }
457 #loftloader-wrapper.pl-frame #loader:before {
458 top: 0;
459 right: 0;
460 left: auto;
461 -webkit-animation: drawframeTop 4s linear infinite;
462 animation: drawframeTop 4s linear infinite; }
463 #loftloader-wrapper.pl-frame #loader:after {
464 right: auto;
465 bottom: 0;
466 left: 0;
467 -webkit-animation: drawframeBottom 4s linear infinite 1s;
468 animation: drawframeBottom 4s linear infinite 1s; }
469 #loftloader-wrapper.pl-frame #loader span {
470 position: absolute;
471 top: 0;
472 left: 0;
473 display: block;
474 width: 100%;
475 height: 100%; }
476 #loftloader-wrapper.pl-frame #loader span:before, #loftloader-wrapper.pl-frame #loader span:after {
477 position: absolute;
478 width: 4px;
479 height: 100%;
480 background: currentColor;
481 content: ""; }
482 #loftloader-wrapper.pl-frame #loader span:before {
483 top: auto;
484 right: 0;
485 bottom: 0;
486 -webkit-animation: drawframeRight 4s linear infinite 0.5s;
487 animation: drawframeRight 4s linear infinite 0.5s; }
488 #loftloader-wrapper.pl-frame #loader span:after {
489 top: 0;
490 bottom: auto;
491 left: 0;
492 -webkit-animation: drawframeLeft 4s linear infinite 1.5s;
493 animation: drawframeLeft 4s linear infinite 1.5s; }
494 #loftloader-wrapper.pl-frame #loader img {
495 position: absolute;
496 top: 50%;
497 left: 50%;
498 -webkit-transform: translate(-50%, -50%);
499 -ms-transform: translate(-50%, -50%);
500 transform: translate(-50%, -50%);
501 display: block;
502 max-width: 80%;
503 max-height: 80%; }
504
505 /* ==========================================================================
506 Loading - Loading Custom Image
507 ========================================================================== */
508 #loftloader-wrapper.pl-imgloading #loader {
509 width: auto;
510 height: auto;
511 max-width: 90vw; }
512 #loftloader-wrapper.pl-imgloading #loader img {
513 position: relative;
514 z-index: 1;
515 display: block;
516 width: 100%;
517 height: auto;
518 margin: 0 auto; }
519 #loftloader-wrapper.pl-imgloading #loader img {
520 opacity: 0.3; }
521 #loftloader-wrapper.pl-imgloading #loader span {
522 position: absolute;
523 bottom: 0;
524 left: 0;
525 z-index: 3;
526 display: block;
527 width: 100%;
528 height: 0%;
529 transition: 0s;
530 background-repeat: no-repeat;
531 background-size: cover;
532 background-position: center bottom;
533 -webkit-animation: imgLoading 6s linear infinite;
534 animation: imgLoading 6s linear infinite; }
535
536 /*# sourceMappingURL=loftloader.css.map */
537