PluginProbe
Survey Maker by AYS / 5.2.3.9
Survey Maker by AYS v5.2.3.9
5.2.3.9 5.2.3.8 5.2.3.7 5.2.3.6 5.2.3.5 5.2.3.4 5.2.3.3 5.2.3.2 5.2.3.1 5.2.3.0 5.2.2.9 5.2.2.8 5.2.2.7 5.2.2.6 5.2.2.5 5.2.2.4 5.2.2.3 5.2.2.2 5.2.2.1 5.2.2.0 5.2.1.9 5.2.1.8 5.2.0.8 5.2.0.9 5.2.1.0 All 152 releases
survey-maker / public / css / loaders.css

loaders.css in Survey Maker by AYS 5.2.3.9, at public/css/loaders.css

732 lines 13.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Quiz default */
2
3 .lds-ellipsis {
4 display: inline-block;
5 position: relative;
6 width: 64px;
7 height: 64px;
8 }
9 .lds-ellipsis div {
10 position: absolute;
11 top: 27px;
12 width: 11px;
13 height: 11px;
14 border-radius: 50%;
15 background: #000;
16 animation-timing-function: cubic-bezier(0, 1, 1, 0);
17 }
18 .lds-ellipsis div:nth-child(1) {
19 left: 8px;
20 animation: lds-ellipsis1 0.6s infinite;
21 }
22 .lds-ellipsis div:nth-child(2) {
23 left: 8px;
24 animation: lds-ellipsis2 0.6s infinite;
25 }
26 .lds-ellipsis div:nth-child(3) {
27 left: 32px;
28 animation: lds-ellipsis2 0.6s infinite;
29 }
30 .lds-ellipsis div:nth-child(4) {
31 left: 56px;
32 animation: lds-ellipsis3 0.6s infinite;
33 }
34 @keyframes lds-ellipsis1 {
35 0% {
36 transform: scale(0);
37 }
38 100% {
39 transform: scale(1);
40 }
41 }
42 @keyframes lds-ellipsis3 {
43 0% {
44 transform: scale(1);
45 }
46 100% {
47 transform: scale(0);
48 }
49 }
50 @keyframes lds-ellipsis2 {
51 0% {
52 transform: translate(0, 0);
53 }
54 100% {
55 transform: translate(24px, 0);
56 }
57 }
58
59 .ays-survey-container .ays-survey-wait-loading-loader{
60 position: absolute;
61 top: 50%;
62 left: 50%;
63 z-index: 3;
64 transform: translate(-50%, -50%);
65 display: none;
66 }
67
68 /* Quiz loader klor */
69
70 .lds-default {
71 display: inline-block;
72 position: relative;
73 width: 64px;
74 height: 64px;
75 }
76 .lds-default div {
77 position: absolute;
78 width: 6px;
79 height: 6px;
80 background: #000;
81 border-radius: 50%;
82 animation: lds-default 1.2s linear infinite;
83 }
84 .lds-default div:nth-child(1) {
85 animation-delay: 0s;
86 top: 37px;
87 left: 66px;
88 }
89 .lds-default div:nth-child(2) {
90 animation-delay: -0.1s;
91 top: 22px;
92 left: 62px;
93 }
94 .lds-default div:nth-child(3) {
95 animation-delay: -0.2s;
96 top: 11px;
97 left: 52px;
98 }
99 .lds-default div:nth-child(4) {
100 animation-delay: -0.3s;
101 top: 7px;
102 left: 37px;
103 }
104 .lds-default div:nth-child(5) {
105 animation-delay: -0.4s;
106 top: 11px;
107 left: 22px;
108 }
109 .lds-default div:nth-child(6) {
110 animation-delay: -0.5s;
111 top: 22px;
112 left: 11px;
113 }
114 .lds-default div:nth-child(7) {
115 animation-delay: -0.6s;
116 top: 37px;
117 left: 7px;
118 }
119 .lds-default div:nth-child(8) {
120 animation-delay: -0.7s;
121 top: 52px;
122 left: 11px;
123 }
124 .lds-default div:nth-child(9) {
125 animation-delay: -0.8s;
126 top: 62px;
127 left: 22px;
128 }
129 .lds-default div:nth-child(10) {
130 animation-delay: -0.9s;
131 top: 66px;
132 left: 37px;
133 }
134 .lds-default div:nth-child(11) {
135 animation-delay: -1s;
136 top: 62px;
137 left: 52px;
138 }
139 .lds-default div:nth-child(12) {
140 animation-delay: -1.1s;
141 top: 52px;
142 left: 52px;
143 }
144 @keyframes lds-default {
145 0%, 20%, 80%, 100% {
146 transform: scale(1);
147 }
148 50% {
149 transform: scale(1.5);
150 }
151 }
152
153
154 /* Quiz circle */
155 .lds-circle {
156 display: inline-block;
157 width: 52px;
158 height: 52px;
159 margin: 6px;
160 border-radius: 50%;
161 background: #000;
162 animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
163 }
164 @keyframes lds-circle {
165 0%, 100% {
166 animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
167 }
168 0% {
169 transform: rotateY(0deg);
170 }
171 50% {
172 transform: rotateY(1800deg);
173 animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
174 }
175 100% {
176 transform: rotateY(3600deg);
177 }
178 }
179
180 /* Quiz dual ring */
181 .lds-dual-ring {
182 display: inline-block;
183 width: 64px;
184 height: 64px;
185 }
186 .lds-dual-ring:after {
187 content: " ";
188 display: block;
189 width: 52px;
190 height: 52px;
191 margin: 8px;
192 border-radius: 50%;
193 border: 6px solid #000;
194 border-color: #000 transparent #000 transparent;
195 animation: lds-dual-ring 1.2s linear infinite;
196 }
197 @keyframes lds-dual-ring {
198 0% {
199 transform: rotate(0deg);
200 }
201 100% {
202 transform: rotate(360deg);
203 }
204 }
205
206 /* Quiz facebook */
207
208 .lds-facebook {
209 display: inline-block;
210 position: relative;
211 width: 64px;
212 height: 64px;
213 }
214 .lds-facebook div {
215 display: inline-block;
216 position: absolute;
217 left: 6px;
218 width: 12px;
219 background: #000;
220 animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
221 }
222 .lds-facebook div:nth-child(1) {
223 left: 6px;
224 animation-delay: -0.24s;
225 }
226 .lds-facebook div:nth-child(2) {
227 left: 26px;
228 animation-delay: -0.12s;
229 }
230 .lds-facebook div:nth-child(3) {
231 left: 46px;
232 animation-delay: 0;
233 }
234 @keyframes lds-facebook {
235 0% {
236 top: 6px;
237 height: 64px;
238 }
239 50%, 100% {
240 top: 18px;
241 height: 32px;
242 }
243 }
244
245
246 /* Quiz grid */
247
248 .lds-grid {
249 display: inline-block;
250 position: relative;
251 width: 80px;
252 height: 80px;
253 }
254 .lds-grid div {
255 position: absolute;
256 width: 16px;
257 height: 16px;
258 border-radius: 50%;
259 background: #000;
260 animation: lds-grid 1.2s linear infinite;
261 }
262 .lds-grid div:nth-child(1) {
263 top: 8px;
264 left: 8px;
265 animation-delay: 0s;
266 }
267 .lds-grid div:nth-child(2) {
268 top: 8px;
269 left: 32px;
270 animation-delay: -0.4s;
271 }
272 .lds-grid div:nth-child(3) {
273 top: 8px;
274 left: 56px;
275 animation-delay: -0.8s;
276 }
277 .lds-grid div:nth-child(4) {
278 top: 32px;
279 left: 8px;
280 animation-delay: -0.4s;
281 }
282 .lds-grid div:nth-child(5) {
283 top: 32px;
284 left: 32px;
285 animation-delay: -0.8s;
286 }
287 .lds-grid div:nth-child(6) {
288 top: 32px;
289 left: 56px;
290 animation-delay: -1.2s;
291 }
292 .lds-grid div:nth-child(7) {
293 top: 56px;
294 left: 8px;
295 animation-delay: -0.8s;
296 }
297 .lds-grid div:nth-child(8) {
298 top: 56px;
299 left: 32px;
300 animation-delay: -1.2s;
301 }
302 .lds-grid div:nth-child(9) {
303 top: 56px;
304 left: 56px;
305 animation-delay: -1.6s;
306 }
307 @keyframes lds-grid {
308 0%, 100% {
309 opacity: 1;
310 }
311 50% {
312 opacity: 0.5;
313 }
314 }
315
316 /* Quiz heart */
317
318 .lds-heart {
319 display: inline-block;
320 position: relative;
321 width: 80px;
322 height: 80px;
323 transform: rotate(45deg);
324 transform-origin: 40px 40px;
325 }
326 .lds-heart div {
327 top: 32px;
328 left: 32px;
329 position: absolute;
330 width: 32px;
331 height: 32px;
332 background: #000;
333 animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
334 }
335 .lds-heart div:after,
336 .lds-heart div:before {
337 content: " ";
338 position: absolute;
339 display: block;
340 width: 32px;
341 height: 32px;
342 background: #000;
343 }
344 .lds-heart div:before {
345 left: -24px;
346 border-radius: 50% 0 0 50%;
347 }
348 .lds-heart div:after {
349 top: -24px;
350 border-radius: 50% 50% 0 0;
351 }
352 @keyframes lds-heart {
353 0% {
354 transform: scale(0.95);
355 }
356 5% {
357 transform: scale(1.1);
358 }
359 39% {
360 transform: scale(0.85);
361 }
362 45% {
363 transform: scale(1);
364 }
365 60% {
366 transform: scale(0.95);
367 }
368 100% {
369 transform: scale(0.9);
370 }
371 }
372
373 /* Quiz hourglass */
374 .lds-hourglass {
375 display: inline-block;
376 position: relative;
377 width: 64px;
378 height: 64px;
379 }
380 .lds-hourglass:after {
381 content: " ";
382 display: block;
383 border-radius: 50%;
384 width: 0;
385 height: 0;
386 margin: 8px;
387 box-sizing: border-box;
388 border: 24px solid #fff;
389 border-color: #000 transparent #000 transparent;
390 animation: lds-hourglass 1.2s infinite;
391 }
392 @keyframes lds-hourglass {
393 0% {
394 transform: rotate(0);
395 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
396 }
397 50% {
398 transform: rotate(900deg);
399 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
400 }
401 100% {
402 transform: rotate(1800deg);
403 }
404 }
405
406 /* Quiz ring */
407 .lds-ring {
408 display: inline-block;
409 position: relative;
410 width: 80px;
411 height: 80px;
412 }
413 .lds-ring div {
414 box-sizing: border-box;
415 display: block;
416 position: absolute;
417 width: 64px;
418 height: 64px;
419 margin: 8px;
420 border: 8px solid #000;
421 border-radius: 50%;
422 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
423 border-color: #000 transparent transparent transparent;
424 }
425 .lds-ring div:nth-child(1) {
426 animation-delay: -0.45s;
427 }
428 .lds-ring div:nth-child(2) {
429 animation-delay: -0.3s;
430 }
431 .lds-ring div:nth-child(3) {
432 animation-delay: -0.15s;
433 }
434 @keyframes lds-ring {
435 0% {
436 transform: rotate(0deg);
437 }
438 100% {
439 transform: rotate(360deg);
440 }
441 }
442
443
444
445 /* Quiz ripple */
446
447 .lds-ripple {
448 display: inline-block;
449 position: relative;
450 width: 64px;
451 height: 64px;
452 }
453 .lds-ripple div {
454 position: absolute;
455 border: 4px solid #000;
456 opacity: 1;
457 border-radius: 50%;
458 animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
459 }
460 .lds-ripple div:nth-child(2) {
461 animation-delay: -0.5s;
462 }
463 @keyframes lds-ripple {
464 0% {
465 top: 32px;
466 left: 32px;
467 width: 0;
468 height: 0;
469 opacity: 1;
470 }
471 100% {
472 top: 0px;
473 left: 0px;
474 width: 64px;
475 height: 64px;
476 opacity: 0;
477 }
478 }
479
480 /* Quiz roller */
481
482 .lds-roller {
483 display: inline-block;
484 position: relative;
485 width: 80px;
486 height: 80px;
487 }
488 .lds-roller div {
489 animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
490 transform-origin: 40px 40px;
491 }
492 .lds-roller div:after {
493 content: " ";
494 display: block;
495 position: absolute;
496 width: 7px;
497 height: 7px;
498 border-radius: 50%;
499 background: #000;
500 margin: -4px 0 0 -4px;
501 }
502 .lds-roller div:nth-child(1) {
503 animation-delay: -0.036s;
504 }
505 .lds-roller div:nth-child(1):after {
506 top: 63px;
507 left: 63px;
508 }
509 .lds-roller div:nth-child(2) {
510 animation-delay: -0.072s;
511 }
512 .lds-roller div:nth-child(2):after {
513 top: 68px;
514 left: 56px;
515 }
516 .lds-roller div:nth-child(3) {
517 animation-delay: -0.108s;
518 }
519 .lds-roller div:nth-child(3):after {
520 top: 71px;
521 left: 48px;
522 }
523 .lds-roller div:nth-child(4) {
524 animation-delay: -0.144s;
525 }
526 .lds-roller div:nth-child(4):after {
527 top: 72px;
528 left: 40px;
529 }
530 .lds-roller div:nth-child(5) {
531 animation-delay: -0.18s;
532 }
533 .lds-roller div:nth-child(5):after {
534 top: 71px;
535 left: 32px;
536 }
537 .lds-roller div:nth-child(6) {
538 animation-delay: -0.216s;
539 }
540 .lds-roller div:nth-child(6):after {
541 top: 68px;
542 left: 24px;
543 }
544 .lds-roller div:nth-child(7) {
545 animation-delay: -0.252s;
546 }
547 .lds-roller div:nth-child(7):after {
548 top: 63px;
549 left: 17px;
550 }
551 .lds-roller div:nth-child(8) {
552 animation-delay: -0.288s;
553 }
554 .lds-roller div:nth-child(8):after {
555 top: 56px;
556 left: 12px;
557 }
558 @keyframes lds-roller {
559 0% {
560 transform: rotate(0deg);
561 }
562 100% {
563 transform: rotate(360deg);
564 }
565 }
566
567 /* Quiz spinner */
568 .lds-spinner {
569 color: official;
570 display: inline-block;
571 position: relative;
572 width: 64px;
573 height: 64px;
574 }
575 .lds-spinner div {
576 transform-origin: 30px 30px;
577 animation: lds-spinner 1.2s linear infinite;
578 }
579 .lds-spinner div:after {
580 content: " ";
581 display: block;
582 position: absolute;
583 top: 3px;
584 left: 27px;
585 width: 5px;
586 height: 13px;
587 border-radius: 20%;
588 background: #000;
589 }
590 .lds-spinner div:nth-child(1) {
591 transform: rotate(0deg);
592 animation-delay: -1.1s;
593 }
594 .lds-spinner div:nth-child(2) {
595 transform: rotate(30deg);
596 animation-delay: -1s;
597 }
598 .lds-spinner div:nth-child(3) {
599 transform: rotate(60deg);
600 animation-delay: -0.9s;
601 }
602 .lds-spinner div:nth-child(4) {
603 transform: rotate(90deg);
604 animation-delay: -0.8s;
605 }
606 .lds-spinner div:nth-child(5) {
607 transform: rotate(120deg);
608 animation-delay: -0.7s;
609 }
610 .lds-spinner div:nth-child(6) {
611 transform: rotate(150deg);
612 animation-delay: -0.6s;
613 }
614 .lds-spinner div:nth-child(7) {
615 transform: rotate(180deg);
616 animation-delay: -0.5s;
617 }
618 .lds-spinner div:nth-child(8) {
619 transform: rotate(210deg);
620 animation-delay: -0.4s;
621 }
622 .lds-spinner div:nth-child(9) {
623 transform: rotate(240deg);
624 animation-delay: -0.3s;
625 }
626 .lds-spinner div:nth-child(10) {
627 transform: rotate(270deg);
628 animation-delay: -0.2s;
629 }
630 .lds-spinner div:nth-child(11) {
631 transform: rotate(300deg);
632 animation-delay: -0.1s;
633 }
634 .lds-spinner div:nth-child(12) {
635 transform: rotate(330deg);
636 animation-delay: 0s;
637 }
638 @keyframes lds-spinner {
639 0% {
640 opacity: 1;
641 }
642 100% {
643 opacity: 0;
644 }
645 }
646
647
648 /* Survey loader 1 (default) */
649 .ays-survey-loader-snake {
650 text-align: center;
651 margin: 0 auto;
652 width: 200px;
653 }
654
655 .ays-survey-loader-snake div {
656 font-size: 15px;
657 padding: 0 10px;
658 opacity: 0;
659 display: inline-block;
660 }
661 .ays-survey-loader-snake div:after {
662 font-family: FontAwesome;
663 content: '\f111';
664 }
665
666 .ays-survey-loader-snake div:nth-child(1) {
667 -webkit-animation: ays-survey-loader-snake 3s 600ms infinite ease-in-out;
668 animation: ays-survey-loader-snake 3s 600ms infinite ease-in-out;
669 }
670
671 .ays-survey-loader-snake div:nth-child(2) {
672 -webkit-animation: ays-survey-loader-snake 3s 500ms infinite ease-in-out;
673 animation: ays-survey-loader-snake 3s 500ms infinite ease-in-out;
674 }
675
676 .ays-survey-loader-snake div:nth-child(3) {
677 -webkit-animation: ays-survey-loader-snake 3s 400ms infinite ease-in-out;
678 animation: ays-survey-loader-snake 3s 400ms infinite ease-in-out;
679 }
680
681 .ays-survey-loader-snake div:nth-child(4) {
682 -webkit-animation: ays-survey-loader-snake 3s 300ms infinite ease-in-out;
683 animation: ays-survey-loader-snake 3s 300ms infinite ease-in-out;
684 }
685
686 .ays-survey-loader-snake div:nth-child(5) {
687 -webkit-animation: ays-survey-loader-snake 3s 200ms infinite ease-in-out;
688 animation: ays-survey-loader-snake 3s 200ms infinite ease-in-out;
689 }
690
691 .ays-survey-loader-snake div:nth-child(6) {
692 -webkit-animation: ays-survey-loader-snake 3s 100ms infinite ease-in-out;
693 animation: ays-survey-loader-snake 3s 100ms infinite ease-in-out;
694 }
695
696
697 @keyframes ays-survey-loader-snake {
698 0% {
699 opacity: 0;
700 transform: translateX(-300px) scale(1);
701 }
702 33% {
703 opacity: 1;
704 transform: translateX(0px) scale(2);
705 }
706 66% {
707 opacity: 1;
708 transform: translateX(0px) scale(1);
709 }
710 100% {
711 opacity: 0;
712 transform: translateX(300px) scale(2);
713 }
714 }
715 @-webkit-keyframes ays-survey-loader-snake {
716 0% {
717 opacity: 0;
718 -webkit-transform: translateX(-300px);
719 }
720 33% {
721 opacity: 1;
722 -webkit-transform: translateX(0px);
723 }
724 66% {
725 opacity: 1;
726 -webkit-transform: translateX(0px);
727 }
728 100% {
729 opacity: 0;
730 -webkit-transform: translateX(300px);
731 }
732 }