UNPKG

45.1 kBCSSView Raw
1
2.next-sr-only {
3 position: absolute;
4 width: 1px;
5 height: 1px;
6 padding: 0;
7 overflow: hidden;
8 clip: rect(0, 0, 0, 0);
9 white-space: nowrap;
10 border: 0;
11 top: 0;
12 margin: -1px; }
13
14.next-loading-fusion-reactor[dir=rtl] {
15 -webkit-animation-name: nextVectorRouteRTL;
16 -moz-animation-name: nextVectorRouteRTL;
17 -ms-animation-name: nextVectorRouteRTL;
18 -o-animation-name: nextVectorRouteRTL;
19 animation-name: nextVectorRouteRTL; }
20
21@-webkit-keyframes nextVectorRouteRTL {
22 0% {
23 -webkit-transform: rotate(0deg);
24 -moz-transform: rotate(0deg);
25 -ms-transform: rotate(0deg);
26 -o-transform: rotate(0deg);
27 transform: rotate(0deg); }
28 5% {
29 -webkit-transform: rotate(-90deg);
30 -moz-transform: rotate(-90deg);
31 -ms-transform: rotate(-90deg);
32 -o-transform: rotate(-90deg);
33 transform: rotate(-90deg); }
34 25% {
35 -webkit-transform: rotate(-90deg);
36 -moz-transform: rotate(-90deg);
37 -ms-transform: rotate(-90deg);
38 -o-transform: rotate(-90deg);
39 transform: rotate(-90deg); }
40 30% {
41 -webkit-transform: rotate(-180deg);
42 -moz-transform: rotate(-180deg);
43 -ms-transform: rotate(-180deg);
44 -o-transform: rotate(-180deg);
45 transform: rotate(-180deg); }
46 50% {
47 -webkit-transform: rotate(-180deg);
48 -moz-transform: rotate(-180deg);
49 -ms-transform: rotate(-180deg);
50 -o-transform: rotate(-180deg);
51 transform: rotate(-180deg); }
52 55% {
53 -webkit-transform: rotate(-270deg);
54 -moz-transform: rotate(-270deg);
55 -ms-transform: rotate(-270deg);
56 -o-transform: rotate(-270deg);
57 transform: rotate(-270deg); }
58 75% {
59 -webkit-transform: rotate(-270deg);
60 -moz-transform: rotate(-270deg);
61 -ms-transform: rotate(-270deg);
62 -o-transform: rotate(-270deg);
63 transform: rotate(-270deg); }
64 80% {
65 -webkit-transform: rotate(-360deg);
66 -moz-transform: rotate(-360deg);
67 -ms-transform: rotate(-360deg);
68 -o-transform: rotate(-360deg);
69 transform: rotate(-360deg); }
70 100% {
71 -webkit-transform: rotate(-360deg);
72 -moz-transform: rotate(-360deg);
73 -ms-transform: rotate(-360deg);
74 -o-transform: rotate(-360deg);
75 transform: rotate(-360deg); } }
76
77@-moz-keyframes nextVectorRouteRTL {
78 0% {
79 -webkit-transform: rotate(0deg);
80 -moz-transform: rotate(0deg);
81 -ms-transform: rotate(0deg);
82 -o-transform: rotate(0deg);
83 transform: rotate(0deg); }
84 5% {
85 -webkit-transform: rotate(-90deg);
86 -moz-transform: rotate(-90deg);
87 -ms-transform: rotate(-90deg);
88 -o-transform: rotate(-90deg);
89 transform: rotate(-90deg); }
90 25% {
91 -webkit-transform: rotate(-90deg);
92 -moz-transform: rotate(-90deg);
93 -ms-transform: rotate(-90deg);
94 -o-transform: rotate(-90deg);
95 transform: rotate(-90deg); }
96 30% {
97 -webkit-transform: rotate(-180deg);
98 -moz-transform: rotate(-180deg);
99 -ms-transform: rotate(-180deg);
100 -o-transform: rotate(-180deg);
101 transform: rotate(-180deg); }
102 50% {
103 -webkit-transform: rotate(-180deg);
104 -moz-transform: rotate(-180deg);
105 -ms-transform: rotate(-180deg);
106 -o-transform: rotate(-180deg);
107 transform: rotate(-180deg); }
108 55% {
109 -webkit-transform: rotate(-270deg);
110 -moz-transform: rotate(-270deg);
111 -ms-transform: rotate(-270deg);
112 -o-transform: rotate(-270deg);
113 transform: rotate(-270deg); }
114 75% {
115 -webkit-transform: rotate(-270deg);
116 -moz-transform: rotate(-270deg);
117 -ms-transform: rotate(-270deg);
118 -o-transform: rotate(-270deg);
119 transform: rotate(-270deg); }
120 80% {
121 -webkit-transform: rotate(-360deg);
122 -moz-transform: rotate(-360deg);
123 -ms-transform: rotate(-360deg);
124 -o-transform: rotate(-360deg);
125 transform: rotate(-360deg); }
126 100% {
127 -webkit-transform: rotate(-360deg);
128 -moz-transform: rotate(-360deg);
129 -ms-transform: rotate(-360deg);
130 -o-transform: rotate(-360deg);
131 transform: rotate(-360deg); } }
132
133@-ms-keyframes nextVectorRouteRTL {
134 0% {
135 -webkit-transform: rotate(0deg);
136 -moz-transform: rotate(0deg);
137 -ms-transform: rotate(0deg);
138 -o-transform: rotate(0deg);
139 transform: rotate(0deg); }
140 5% {
141 -webkit-transform: rotate(-90deg);
142 -moz-transform: rotate(-90deg);
143 -ms-transform: rotate(-90deg);
144 -o-transform: rotate(-90deg);
145 transform: rotate(-90deg); }
146 25% {
147 -webkit-transform: rotate(-90deg);
148 -moz-transform: rotate(-90deg);
149 -ms-transform: rotate(-90deg);
150 -o-transform: rotate(-90deg);
151 transform: rotate(-90deg); }
152 30% {
153 -webkit-transform: rotate(-180deg);
154 -moz-transform: rotate(-180deg);
155 -ms-transform: rotate(-180deg);
156 -o-transform: rotate(-180deg);
157 transform: rotate(-180deg); }
158 50% {
159 -webkit-transform: rotate(-180deg);
160 -moz-transform: rotate(-180deg);
161 -ms-transform: rotate(-180deg);
162 -o-transform: rotate(-180deg);
163 transform: rotate(-180deg); }
164 55% {
165 -webkit-transform: rotate(-270deg);
166 -moz-transform: rotate(-270deg);
167 -ms-transform: rotate(-270deg);
168 -o-transform: rotate(-270deg);
169 transform: rotate(-270deg); }
170 75% {
171 -webkit-transform: rotate(-270deg);
172 -moz-transform: rotate(-270deg);
173 -ms-transform: rotate(-270deg);
174 -o-transform: rotate(-270deg);
175 transform: rotate(-270deg); }
176 80% {
177 -webkit-transform: rotate(-360deg);
178 -moz-transform: rotate(-360deg);
179 -ms-transform: rotate(-360deg);
180 -o-transform: rotate(-360deg);
181 transform: rotate(-360deg); }
182 100% {
183 -webkit-transform: rotate(-360deg);
184 -moz-transform: rotate(-360deg);
185 -ms-transform: rotate(-360deg);
186 -o-transform: rotate(-360deg);
187 transform: rotate(-360deg); } }
188
189@-o-keyframes nextVectorRouteRTL {
190 0% {
191 -webkit-transform: rotate(0deg);
192 -moz-transform: rotate(0deg);
193 -ms-transform: rotate(0deg);
194 -o-transform: rotate(0deg);
195 transform: rotate(0deg); }
196 5% {
197 -webkit-transform: rotate(-90deg);
198 -moz-transform: rotate(-90deg);
199 -ms-transform: rotate(-90deg);
200 -o-transform: rotate(-90deg);
201 transform: rotate(-90deg); }
202 25% {
203 -webkit-transform: rotate(-90deg);
204 -moz-transform: rotate(-90deg);
205 -ms-transform: rotate(-90deg);
206 -o-transform: rotate(-90deg);
207 transform: rotate(-90deg); }
208 30% {
209 -webkit-transform: rotate(-180deg);
210 -moz-transform: rotate(-180deg);
211 -ms-transform: rotate(-180deg);
212 -o-transform: rotate(-180deg);
213 transform: rotate(-180deg); }
214 50% {
215 -webkit-transform: rotate(-180deg);
216 -moz-transform: rotate(-180deg);
217 -ms-transform: rotate(-180deg);
218 -o-transform: rotate(-180deg);
219 transform: rotate(-180deg); }
220 55% {
221 -webkit-transform: rotate(-270deg);
222 -moz-transform: rotate(-270deg);
223 -ms-transform: rotate(-270deg);
224 -o-transform: rotate(-270deg);
225 transform: rotate(-270deg); }
226 75% {
227 -webkit-transform: rotate(-270deg);
228 -moz-transform: rotate(-270deg);
229 -ms-transform: rotate(-270deg);
230 -o-transform: rotate(-270deg);
231 transform: rotate(-270deg); }
232 80% {
233 -webkit-transform: rotate(-360deg);
234 -moz-transform: rotate(-360deg);
235 -ms-transform: rotate(-360deg);
236 -o-transform: rotate(-360deg);
237 transform: rotate(-360deg); }
238 100% {
239 -webkit-transform: rotate(-360deg);
240 -moz-transform: rotate(-360deg);
241 -ms-transform: rotate(-360deg);
242 -o-transform: rotate(-360deg);
243 transform: rotate(-360deg); } }
244
245@keyframes nextVectorRouteRTL {
246 0% {
247 -webkit-transform: rotate(0deg);
248 -moz-transform: rotate(0deg);
249 -ms-transform: rotate(0deg);
250 -o-transform: rotate(0deg);
251 transform: rotate(0deg); }
252 5% {
253 -webkit-transform: rotate(-90deg);
254 -moz-transform: rotate(-90deg);
255 -ms-transform: rotate(-90deg);
256 -o-transform: rotate(-90deg);
257 transform: rotate(-90deg); }
258 25% {
259 -webkit-transform: rotate(-90deg);
260 -moz-transform: rotate(-90deg);
261 -ms-transform: rotate(-90deg);
262 -o-transform: rotate(-90deg);
263 transform: rotate(-90deg); }
264 30% {
265 -webkit-transform: rotate(-180deg);
266 -moz-transform: rotate(-180deg);
267 -ms-transform: rotate(-180deg);
268 -o-transform: rotate(-180deg);
269 transform: rotate(-180deg); }
270 50% {
271 -webkit-transform: rotate(-180deg);
272 -moz-transform: rotate(-180deg);
273 -ms-transform: rotate(-180deg);
274 -o-transform: rotate(-180deg);
275 transform: rotate(-180deg); }
276 55% {
277 -webkit-transform: rotate(-270deg);
278 -moz-transform: rotate(-270deg);
279 -ms-transform: rotate(-270deg);
280 -o-transform: rotate(-270deg);
281 transform: rotate(-270deg); }
282 75% {
283 -webkit-transform: rotate(-270deg);
284 -moz-transform: rotate(-270deg);
285 -ms-transform: rotate(-270deg);
286 -o-transform: rotate(-270deg);
287 transform: rotate(-270deg); }
288 80% {
289 -webkit-transform: rotate(-360deg);
290 -moz-transform: rotate(-360deg);
291 -ms-transform: rotate(-360deg);
292 -o-transform: rotate(-360deg);
293 transform: rotate(-360deg); }
294 100% {
295 -webkit-transform: rotate(-360deg);
296 -moz-transform: rotate(-360deg);
297 -ms-transform: rotate(-360deg);
298 -o-transform: rotate(-360deg);
299 transform: rotate(-360deg); } }
300
301/* put your code here */
302.next-loading {
303 position: relative;
304 /* 遮罩层 */
305 /* for IE9,10 */
306 /* text on the right side of */
307 /* 动效 */ }
308 .next-loading.next-open {
309 pointer-events: none; }
310 .next-loading .next-loading-component {
311 opacity: .7;
312 -webkit-filter: blur(1px);
313 filter: blur(1px);
314 /* stylelint-disable */
315 filter: "progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
316 /* IE6~IE9 */
317 /* stylelint-enable */
318 position: relative;
319 pointer-events: none; }
320 .next-loading-masker {
321 position: absolute;
322 top: 0;
323 bottom: 0;
324 left: 0;
325 right: 0;
326 z-index: 99;
327 opacity: .2;
328 background: #FFF; }
329 .next-loading-inline {
330 display: inline-block; }
331 .next-loading-tip {
332 display: block;
333 position: absolute;
334 top: 50%;
335 left: 50%;
336 z-index: 4;
337 transform: translate(-50%, -50%);
338 text-align: center; }
339 .next-loading-tip-fullscreen {
340 top: inherit;
341 left: inherit;
342 transform: inherit; }
343 .next-loading-tip-placeholder {
344 display: none; }
345 .next-loading-right-tip .next-loading-indicator {
346 display: inline-block; }
347 .next-loading-right-tip .next-loading-tip-content {
348 position: absolute;
349 display: block;
350 top: 50%;
351 right: 0;
352 transform: translate(0, -50%); }
353 .next-loading-right-tip .next-loading-tip-placeholder {
354 display: inline-block;
355 visibility: hidden;
356 margin-left: 1em; }
357 .next-loading-fusion-reactor {
358 display: inline-block;
359 width: 48px;
360 width: var(--loading-large-size, 48px);
361 height: 48px;
362 height: var(--loading-large-size, 48px);
363 position: relative;
364 margin: 0;
365 -webkit-animation-duration: 5.6s;
366 -webkit-animation-duration: var(--loading-fusion-vector-seconds, 5.6s);
367 -moz-animation-duration: 5.6s;
368 -moz-animation-duration: var(--loading-fusion-vector-seconds, 5.6s);
369 -ms-animation-duration: 5.6s;
370 -ms-animation-duration: var(--loading-fusion-vector-seconds, 5.6s);
371 -o-animation-duration: 5.6s;
372 -o-animation-duration: var(--loading-fusion-vector-seconds, 5.6s);
373 animation-duration: 5.6s;
374 animation-duration: var(--loading-fusion-vector-seconds, 5.6s);
375 -webkit-animation-iteration-count: infinite;
376 -moz-animation-iteration-count: infinite;
377 -ms-animation-iteration-count: infinite;
378 -o-animation-iteration-count: infinite;
379 animation-iteration-count: infinite;
380 -webkit-animation-timing-function: linear;
381 -moz-animation-timing-function: linear;
382 -ms-animation-timing-function: linear;
383 -o-animation-timing-function: linear;
384 animation-timing-function: linear;
385 -webkit-animation-name: nextVectorRoute;
386 -moz-animation-name: nextVectorRoute;
387 -ms-animation-name: nextVectorRoute;
388 -o-animation-name: nextVectorRoute;
389 animation-name: nextVectorRoute; }
390 .next-loading-fusion-reactor .next-loading-dot {
391 position: absolute;
392 margin: auto;
393 width: 12px;
394 width: var(--loading-large-dot-size, 12px);
395 height: 12px;
396 height: var(--loading-large-dot-size, 12px);
397 border-radius: 50%;
398 background: #5584FF;
399 background: var(--loading-dot-color, #5584FF);
400 -webkit-animation-timing-function: ease-in-out;
401 -moz-animation-timing-function: ease-in-out;
402 -ms-animation-timing-function: ease-in-out;
403 -o-animation-timing-function: ease-in-out;
404 animation-timing-function: ease-in-out;
405 -webkit-animation-iteration-count: infinite;
406 -moz-animation-iteration-count: infinite;
407 -ms-animation-iteration-count: infinite;
408 -o-animation-iteration-count: infinite;
409 animation-iteration-count: infinite;
410 -webkit-animation-duration: 1.4s;
411 -webkit-animation-duration: var(--loading-fusion-vector-dot-seconds, 1.4s);
412 -moz-animation-duration: 1.4s;
413 -moz-animation-duration: var(--loading-fusion-vector-dot-seconds, 1.4s);
414 -ms-animation-duration: 1.4s;
415 -ms-animation-duration: var(--loading-fusion-vector-dot-seconds, 1.4s);
416 -o-animation-duration: 1.4s;
417 -o-animation-duration: var(--loading-fusion-vector-dot-seconds, 1.4s);
418 animation-duration: 1.4s;
419 animation-duration: var(--loading-fusion-vector-dot-seconds, 1.4s); }
420 .next-loading-fusion-reactor .next-loading-dot:nth-child(1) {
421 top: 0;
422 bottom: 0;
423 left: 0;
424 -webkit-animation-name: nextVectorDotsX;
425 -moz-animation-name: nextVectorDotsX;
426 -ms-animation-name: nextVectorDotsX;
427 -o-animation-name: nextVectorDotsX;
428 animation-name: nextVectorDotsX; }
429 .next-loading-fusion-reactor .next-loading-dot:nth-child(2) {
430 left: 0;
431 right: 0;
432 top: 0;
433 opacity: .8;
434 -webkit-animation-name: nextVectorDotsY;
435 -moz-animation-name: nextVectorDotsY;
436 -ms-animation-name: nextVectorDotsY;
437 -o-animation-name: nextVectorDotsY;
438 animation-name: nextVectorDotsY; }
439 .next-loading-fusion-reactor .next-loading-dot:nth-child(3) {
440 top: 0;
441 bottom: 0;
442 right: 0;
443 opacity: .6;
444 -webkit-animation-name: nextVectorDotsXR;
445 -moz-animation-name: nextVectorDotsXR;
446 -ms-animation-name: nextVectorDotsXR;
447 -o-animation-name: nextVectorDotsXR;
448 animation-name: nextVectorDotsXR; }
449 .next-loading-fusion-reactor .next-loading-dot:nth-child(4) {
450 left: 0;
451 right: 0;
452 bottom: 0;
453 opacity: .2;
454 -webkit-animation-name: nextVectorDotsYR;
455 -moz-animation-name: nextVectorDotsYR;
456 -ms-animation-name: nextVectorDotsYR;
457 -o-animation-name: nextVectorDotsYR;
458 animation-name: nextVectorDotsYR; }
459 .next-loading-medium-fusion-reactor {
460 width: 32px;
461 width: var(--loading-medium-size, 32px);
462 height: 32px;
463 height: var(--loading-medium-size, 32px); }
464 .next-loading-medium-fusion-reactor .next-loading-dot {
465 width: 8px;
466 width: var(--loading-medium-dot-size, 8px);
467 height: 8px;
468 height: var(--loading-medium-dot-size, 8px); }
469 .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(1) {
470 -webkit-animation-name: nextVectorDotsX-medium;
471 -moz-animation-name: nextVectorDotsX-medium;
472 -ms-animation-name: nextVectorDotsX-medium;
473 -o-animation-name: nextVectorDotsX-medium;
474 animation-name: nextVectorDotsX-medium; }
475 .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2) {
476 -webkit-animation-name: nextVectorDotsY-medium;
477 -moz-animation-name: nextVectorDotsY-medium;
478 -ms-animation-name: nextVectorDotsY-medium;
479 -o-animation-name: nextVectorDotsY-medium;
480 animation-name: nextVectorDotsY-medium; }
481 .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3) {
482 -webkit-animation-name: nextVectorDotsXR-medium;
483 -moz-animation-name: nextVectorDotsXR-medium;
484 -ms-animation-name: nextVectorDotsXR-medium;
485 -o-animation-name: nextVectorDotsXR-medium;
486 animation-name: nextVectorDotsXR-medium; }
487 .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4) {
488 -webkit-animation-name: nextVectorDotsYR-medium;
489 -moz-animation-name: nextVectorDotsYR-medium;
490 -ms-animation-name: nextVectorDotsYR-medium;
491 -o-animation-name: nextVectorDotsYR-medium;
492 animation-name: nextVectorDotsYR-medium; }
493
494@-webkit-keyframes nextVectorRoute {
495 0% {
496 -webkit-transform: rotate(0deg);
497 -moz-transform: rotate(0deg);
498 -ms-transform: rotate(0deg);
499 -o-transform: rotate(0deg);
500 transform: rotate(0deg); }
501 5% {
502 -webkit-transform: rotate(90deg);
503 -moz-transform: rotate(90deg);
504 -ms-transform: rotate(90deg);
505 -o-transform: rotate(90deg);
506 transform: rotate(90deg); }
507 25% {
508 -webkit-transform: rotate(90deg);
509 -moz-transform: rotate(90deg);
510 -ms-transform: rotate(90deg);
511 -o-transform: rotate(90deg);
512 transform: rotate(90deg); }
513 30% {
514 -webkit-transform: rotate(180deg);
515 -moz-transform: rotate(180deg);
516 -ms-transform: rotate(180deg);
517 -o-transform: rotate(180deg);
518 transform: rotate(180deg); }
519 50% {
520 -webkit-transform: rotate(180deg);
521 -moz-transform: rotate(180deg);
522 -ms-transform: rotate(180deg);
523 -o-transform: rotate(180deg);
524 transform: rotate(180deg); }
525 55% {
526 -webkit-transform: rotate(270deg);
527 -moz-transform: rotate(270deg);
528 -ms-transform: rotate(270deg);
529 -o-transform: rotate(270deg);
530 transform: rotate(270deg); }
531 75% {
532 -webkit-transform: rotate(270deg);
533 -moz-transform: rotate(270deg);
534 -ms-transform: rotate(270deg);
535 -o-transform: rotate(270deg);
536 transform: rotate(270deg); }
537 80% {
538 -webkit-transform: rotate(360deg);
539 -moz-transform: rotate(360deg);
540 -ms-transform: rotate(360deg);
541 -o-transform: rotate(360deg);
542 transform: rotate(360deg); }
543 100% {
544 -webkit-transform: rotate(360deg);
545 -moz-transform: rotate(360deg);
546 -ms-transform: rotate(360deg);
547 -o-transform: rotate(360deg);
548 transform: rotate(360deg); } }
549
550@-moz-keyframes nextVectorRoute {
551 0% {
552 -webkit-transform: rotate(0deg);
553 -moz-transform: rotate(0deg);
554 -ms-transform: rotate(0deg);
555 -o-transform: rotate(0deg);
556 transform: rotate(0deg); }
557 5% {
558 -webkit-transform: rotate(90deg);
559 -moz-transform: rotate(90deg);
560 -ms-transform: rotate(90deg);
561 -o-transform: rotate(90deg);
562 transform: rotate(90deg); }
563 25% {
564 -webkit-transform: rotate(90deg);
565 -moz-transform: rotate(90deg);
566 -ms-transform: rotate(90deg);
567 -o-transform: rotate(90deg);
568 transform: rotate(90deg); }
569 30% {
570 -webkit-transform: rotate(180deg);
571 -moz-transform: rotate(180deg);
572 -ms-transform: rotate(180deg);
573 -o-transform: rotate(180deg);
574 transform: rotate(180deg); }
575 50% {
576 -webkit-transform: rotate(180deg);
577 -moz-transform: rotate(180deg);
578 -ms-transform: rotate(180deg);
579 -o-transform: rotate(180deg);
580 transform: rotate(180deg); }
581 55% {
582 -webkit-transform: rotate(270deg);
583 -moz-transform: rotate(270deg);
584 -ms-transform: rotate(270deg);
585 -o-transform: rotate(270deg);
586 transform: rotate(270deg); }
587 75% {
588 -webkit-transform: rotate(270deg);
589 -moz-transform: rotate(270deg);
590 -ms-transform: rotate(270deg);
591 -o-transform: rotate(270deg);
592 transform: rotate(270deg); }
593 80% {
594 -webkit-transform: rotate(360deg);
595 -moz-transform: rotate(360deg);
596 -ms-transform: rotate(360deg);
597 -o-transform: rotate(360deg);
598 transform: rotate(360deg); }
599 100% {
600 -webkit-transform: rotate(360deg);
601 -moz-transform: rotate(360deg);
602 -ms-transform: rotate(360deg);
603 -o-transform: rotate(360deg);
604 transform: rotate(360deg); } }
605
606@-ms-keyframes nextVectorRoute {
607 0% {
608 -webkit-transform: rotate(0deg);
609 -moz-transform: rotate(0deg);
610 -ms-transform: rotate(0deg);
611 -o-transform: rotate(0deg);
612 transform: rotate(0deg); }
613 5% {
614 -webkit-transform: rotate(90deg);
615 -moz-transform: rotate(90deg);
616 -ms-transform: rotate(90deg);
617 -o-transform: rotate(90deg);
618 transform: rotate(90deg); }
619 25% {
620 -webkit-transform: rotate(90deg);
621 -moz-transform: rotate(90deg);
622 -ms-transform: rotate(90deg);
623 -o-transform: rotate(90deg);
624 transform: rotate(90deg); }
625 30% {
626 -webkit-transform: rotate(180deg);
627 -moz-transform: rotate(180deg);
628 -ms-transform: rotate(180deg);
629 -o-transform: rotate(180deg);
630 transform: rotate(180deg); }
631 50% {
632 -webkit-transform: rotate(180deg);
633 -moz-transform: rotate(180deg);
634 -ms-transform: rotate(180deg);
635 -o-transform: rotate(180deg);
636 transform: rotate(180deg); }
637 55% {
638 -webkit-transform: rotate(270deg);
639 -moz-transform: rotate(270deg);
640 -ms-transform: rotate(270deg);
641 -o-transform: rotate(270deg);
642 transform: rotate(270deg); }
643 75% {
644 -webkit-transform: rotate(270deg);
645 -moz-transform: rotate(270deg);
646 -ms-transform: rotate(270deg);
647 -o-transform: rotate(270deg);
648 transform: rotate(270deg); }
649 80% {
650 -webkit-transform: rotate(360deg);
651 -moz-transform: rotate(360deg);
652 -ms-transform: rotate(360deg);
653 -o-transform: rotate(360deg);
654 transform: rotate(360deg); }
655 100% {
656 -webkit-transform: rotate(360deg);
657 -moz-transform: rotate(360deg);
658 -ms-transform: rotate(360deg);
659 -o-transform: rotate(360deg);
660 transform: rotate(360deg); } }
661
662@-o-keyframes nextVectorRoute {
663 0% {
664 -webkit-transform: rotate(0deg);
665 -moz-transform: rotate(0deg);
666 -ms-transform: rotate(0deg);
667 -o-transform: rotate(0deg);
668 transform: rotate(0deg); }
669 5% {
670 -webkit-transform: rotate(90deg);
671 -moz-transform: rotate(90deg);
672 -ms-transform: rotate(90deg);
673 -o-transform: rotate(90deg);
674 transform: rotate(90deg); }
675 25% {
676 -webkit-transform: rotate(90deg);
677 -moz-transform: rotate(90deg);
678 -ms-transform: rotate(90deg);
679 -o-transform: rotate(90deg);
680 transform: rotate(90deg); }
681 30% {
682 -webkit-transform: rotate(180deg);
683 -moz-transform: rotate(180deg);
684 -ms-transform: rotate(180deg);
685 -o-transform: rotate(180deg);
686 transform: rotate(180deg); }
687 50% {
688 -webkit-transform: rotate(180deg);
689 -moz-transform: rotate(180deg);
690 -ms-transform: rotate(180deg);
691 -o-transform: rotate(180deg);
692 transform: rotate(180deg); }
693 55% {
694 -webkit-transform: rotate(270deg);
695 -moz-transform: rotate(270deg);
696 -ms-transform: rotate(270deg);
697 -o-transform: rotate(270deg);
698 transform: rotate(270deg); }
699 75% {
700 -webkit-transform: rotate(270deg);
701 -moz-transform: rotate(270deg);
702 -ms-transform: rotate(270deg);
703 -o-transform: rotate(270deg);
704 transform: rotate(270deg); }
705 80% {
706 -webkit-transform: rotate(360deg);
707 -moz-transform: rotate(360deg);
708 -ms-transform: rotate(360deg);
709 -o-transform: rotate(360deg);
710 transform: rotate(360deg); }
711 100% {
712 -webkit-transform: rotate(360deg);
713 -moz-transform: rotate(360deg);
714 -ms-transform: rotate(360deg);
715 -o-transform: rotate(360deg);
716 transform: rotate(360deg); } }
717
718@keyframes nextVectorRoute {
719 0% {
720 -webkit-transform: rotate(0deg);
721 -moz-transform: rotate(0deg);
722 -ms-transform: rotate(0deg);
723 -o-transform: rotate(0deg);
724 transform: rotate(0deg); }
725 5% {
726 -webkit-transform: rotate(90deg);
727 -moz-transform: rotate(90deg);
728 -ms-transform: rotate(90deg);
729 -o-transform: rotate(90deg);
730 transform: rotate(90deg); }
731 25% {
732 -webkit-transform: rotate(90deg);
733 -moz-transform: rotate(90deg);
734 -ms-transform: rotate(90deg);
735 -o-transform: rotate(90deg);
736 transform: rotate(90deg); }
737 30% {
738 -webkit-transform: rotate(180deg);
739 -moz-transform: rotate(180deg);
740 -ms-transform: rotate(180deg);
741 -o-transform: rotate(180deg);
742 transform: rotate(180deg); }
743 50% {
744 -webkit-transform: rotate(180deg);
745 -moz-transform: rotate(180deg);
746 -ms-transform: rotate(180deg);
747 -o-transform: rotate(180deg);
748 transform: rotate(180deg); }
749 55% {
750 -webkit-transform: rotate(270deg);
751 -moz-transform: rotate(270deg);
752 -ms-transform: rotate(270deg);
753 -o-transform: rotate(270deg);
754 transform: rotate(270deg); }
755 75% {
756 -webkit-transform: rotate(270deg);
757 -moz-transform: rotate(270deg);
758 -ms-transform: rotate(270deg);
759 -o-transform: rotate(270deg);
760 transform: rotate(270deg); }
761 80% {
762 -webkit-transform: rotate(360deg);
763 -moz-transform: rotate(360deg);
764 -ms-transform: rotate(360deg);
765 -o-transform: rotate(360deg);
766 transform: rotate(360deg); }
767 100% {
768 -webkit-transform: rotate(360deg);
769 -moz-transform: rotate(360deg);
770 -ms-transform: rotate(360deg);
771 -o-transform: rotate(360deg);
772 transform: rotate(360deg); } }
773
774/* 20% 的时间在旋转 */
775@-webkit-keyframes nextVectorDotsYR {
776 25% {
777 bottom: 0; }
778 45%,
779 50% {
780 bottom: 16.8px;
781 bottom: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
782 height: 14.4px;
783 height: calc(var(--loading-large-dot-size, 12px)*1.2);
784 width: 14.4px;
785 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
786 90% {
787 bottom: 0;
788 height: 12px;
789 height: var(--loading-large-dot-size, 12px);
790 width: 12px;
791 width: var(--loading-large-dot-size, 12px); } }
792
793@-moz-keyframes nextVectorDotsYR {
794 25% {
795 bottom: 0; }
796 45%,
797 50% {
798 bottom: 16.8px;
799 bottom: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
800 height: 14.4px;
801 height: calc(var(--loading-large-dot-size, 12px)*1.2);
802 width: 14.4px;
803 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
804 90% {
805 bottom: 0;
806 height: 12px;
807 height: var(--loading-large-dot-size, 12px);
808 width: 12px;
809 width: var(--loading-large-dot-size, 12px); } }
810
811@-ms-keyframes nextVectorDotsYR {
812 25% {
813 bottom: 0; }
814 45%,
815 50% {
816 bottom: 16.8px;
817 bottom: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
818 height: 14.4px;
819 height: calc(var(--loading-large-dot-size, 12px)*1.2);
820 width: 14.4px;
821 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
822 90% {
823 bottom: 0;
824 height: 12px;
825 height: var(--loading-large-dot-size, 12px);
826 width: 12px;
827 width: var(--loading-large-dot-size, 12px); } }
828
829@-o-keyframes nextVectorDotsYR {
830 25% {
831 bottom: 0; }
832 45%,
833 50% {
834 bottom: 16.8px;
835 bottom: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
836 height: 14.4px;
837 height: calc(var(--loading-large-dot-size, 12px)*1.2);
838 width: 14.4px;
839 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
840 90% {
841 bottom: 0;
842 height: 12px;
843 height: var(--loading-large-dot-size, 12px);
844 width: 12px;
845 width: var(--loading-large-dot-size, 12px); } }
846
847@keyframes nextVectorDotsYR {
848 25% {
849 bottom: 0; }
850 45%,
851 50% {
852 bottom: 16.8px;
853 bottom: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
854 height: 14.4px;
855 height: calc(var(--loading-large-dot-size, 12px)*1.2);
856 width: 14.4px;
857 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
858 90% {
859 bottom: 0;
860 height: 12px;
861 height: var(--loading-large-dot-size, 12px);
862 width: 12px;
863 width: var(--loading-large-dot-size, 12px); } }
864
865@-webkit-keyframes nextVectorDotsY {
866 25% {
867 top: 0; }
868 45%,
869 50% {
870 top: 16.8px;
871 top: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
872 height: 14.4px;
873 height: calc(var(--loading-large-dot-size, 12px)*1.2);
874 width: 14.4px;
875 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
876 90% {
877 top: 0;
878 height: 12px;
879 height: var(--loading-large-dot-size, 12px);
880 width: 12px;
881 width: var(--loading-large-dot-size, 12px); } }
882
883@-moz-keyframes nextVectorDotsY {
884 25% {
885 top: 0; }
886 45%,
887 50% {
888 top: 16.8px;
889 top: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
890 height: 14.4px;
891 height: calc(var(--loading-large-dot-size, 12px)*1.2);
892 width: 14.4px;
893 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
894 90% {
895 top: 0;
896 height: 12px;
897 height: var(--loading-large-dot-size, 12px);
898 width: 12px;
899 width: var(--loading-large-dot-size, 12px); } }
900
901@-ms-keyframes nextVectorDotsY {
902 25% {
903 top: 0; }
904 45%,
905 50% {
906 top: 16.8px;
907 top: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
908 height: 14.4px;
909 height: calc(var(--loading-large-dot-size, 12px)*1.2);
910 width: 14.4px;
911 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
912 90% {
913 top: 0;
914 height: 12px;
915 height: var(--loading-large-dot-size, 12px);
916 width: 12px;
917 width: var(--loading-large-dot-size, 12px); } }
918
919@-o-keyframes nextVectorDotsY {
920 25% {
921 top: 0; }
922 45%,
923 50% {
924 top: 16.8px;
925 top: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
926 height: 14.4px;
927 height: calc(var(--loading-large-dot-size, 12px)*1.2);
928 width: 14.4px;
929 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
930 90% {
931 top: 0;
932 height: 12px;
933 height: var(--loading-large-dot-size, 12px);
934 width: 12px;
935 width: var(--loading-large-dot-size, 12px); } }
936
937@keyframes nextVectorDotsY {
938 25% {
939 top: 0; }
940 45%,
941 50% {
942 top: 16.8px;
943 top: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
944 height: 14.4px;
945 height: calc(var(--loading-large-dot-size, 12px)*1.2);
946 width: 14.4px;
947 width: calc(var(--loading-large-dot-size, 12px)*1.2); }
948 90% {
949 top: 0;
950 height: 12px;
951 height: var(--loading-large-dot-size, 12px);
952 width: 12px;
953 width: var(--loading-large-dot-size, 12px); } }
954
955@-webkit-keyframes nextVectorDotsX {
956 25% {
957 left: 0; }
958 45%,
959 50% {
960 left: 16.8px;
961 left: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
962 width: 14.4px;
963 width: calc(var(--loading-large-dot-size, 12px)*1.2);
964 height: 14.4px;
965 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
966 90% {
967 left: 0;
968 height: 12px;
969 height: var(--loading-large-dot-size, 12px);
970 width: 12px;
971 width: var(--loading-large-dot-size, 12px); } }
972
973@-moz-keyframes nextVectorDotsX {
974 25% {
975 left: 0; }
976 45%,
977 50% {
978 left: 16.8px;
979 left: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
980 width: 14.4px;
981 width: calc(var(--loading-large-dot-size, 12px)*1.2);
982 height: 14.4px;
983 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
984 90% {
985 left: 0;
986 height: 12px;
987 height: var(--loading-large-dot-size, 12px);
988 width: 12px;
989 width: var(--loading-large-dot-size, 12px); } }
990
991@-ms-keyframes nextVectorDotsX {
992 25% {
993 left: 0; }
994 45%,
995 50% {
996 left: 16.8px;
997 left: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
998 width: 14.4px;
999 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1000 height: 14.4px;
1001 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1002 90% {
1003 left: 0;
1004 height: 12px;
1005 height: var(--loading-large-dot-size, 12px);
1006 width: 12px;
1007 width: var(--loading-large-dot-size, 12px); } }
1008
1009@-o-keyframes nextVectorDotsX {
1010 25% {
1011 left: 0; }
1012 45%,
1013 50% {
1014 left: 16.8px;
1015 left: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1016 width: 14.4px;
1017 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1018 height: 14.4px;
1019 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1020 90% {
1021 left: 0;
1022 height: 12px;
1023 height: var(--loading-large-dot-size, 12px);
1024 width: 12px;
1025 width: var(--loading-large-dot-size, 12px); } }
1026
1027@keyframes nextVectorDotsX {
1028 25% {
1029 left: 0; }
1030 45%,
1031 50% {
1032 left: 16.8px;
1033 left: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1034 width: 14.4px;
1035 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1036 height: 14.4px;
1037 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1038 90% {
1039 left: 0;
1040 height: 12px;
1041 height: var(--loading-large-dot-size, 12px);
1042 width: 12px;
1043 width: var(--loading-large-dot-size, 12px); } }
1044
1045@-webkit-keyframes nextVectorDotsXR {
1046 25% {
1047 right: 0; }
1048 45%,
1049 50% {
1050 right: 16.8px;
1051 right: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1052 width: 14.4px;
1053 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1054 height: 14.4px;
1055 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1056 90% {
1057 right: 0;
1058 height: 12px;
1059 height: var(--loading-large-dot-size, 12px);
1060 width: 12px;
1061 width: var(--loading-large-dot-size, 12px); } }
1062
1063@-moz-keyframes nextVectorDotsXR {
1064 25% {
1065 right: 0; }
1066 45%,
1067 50% {
1068 right: 16.8px;
1069 right: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1070 width: 14.4px;
1071 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1072 height: 14.4px;
1073 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1074 90% {
1075 right: 0;
1076 height: 12px;
1077 height: var(--loading-large-dot-size, 12px);
1078 width: 12px;
1079 width: var(--loading-large-dot-size, 12px); } }
1080
1081@-ms-keyframes nextVectorDotsXR {
1082 25% {
1083 right: 0; }
1084 45%,
1085 50% {
1086 right: 16.8px;
1087 right: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1088 width: 14.4px;
1089 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1090 height: 14.4px;
1091 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1092 90% {
1093 right: 0;
1094 height: 12px;
1095 height: var(--loading-large-dot-size, 12px);
1096 width: 12px;
1097 width: var(--loading-large-dot-size, 12px); } }
1098
1099@-o-keyframes nextVectorDotsXR {
1100 25% {
1101 right: 0; }
1102 45%,
1103 50% {
1104 right: 16.8px;
1105 right: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1106 width: 14.4px;
1107 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1108 height: 14.4px;
1109 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1110 90% {
1111 right: 0;
1112 height: 12px;
1113 height: var(--loading-large-dot-size, 12px);
1114 width: 12px;
1115 width: var(--loading-large-dot-size, 12px); } }
1116
1117@keyframes nextVectorDotsXR {
1118 25% {
1119 right: 0; }
1120 45%,
1121 50% {
1122 right: 16.8px;
1123 right: calc(var(--loading-large-size, 48px)/2 - var(--loading-large-dot-size, 12px)*1.2/2);
1124 width: 14.4px;
1125 width: calc(var(--loading-large-dot-size, 12px)*1.2);
1126 height: 14.4px;
1127 height: calc(var(--loading-large-dot-size, 12px)*1.2); }
1128 90% {
1129 right: 0;
1130 height: 12px;
1131 height: var(--loading-large-dot-size, 12px);
1132 width: 12px;
1133 width: var(--loading-large-dot-size, 12px); } }
1134
1135@-webkit-keyframes nextVectorDotsYR-medium {
1136 25% {
1137 bottom: 0; }
1138 45%,
1139 50% {
1140 bottom: 11.2px;
1141 bottom: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1142 height: 9.6px;
1143 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1144 width: 9.6px;
1145 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1146 90% {
1147 bottom: 0;
1148 height: 8px;
1149 height: var(--loading-medium-dot-size, 8px);
1150 width: 8px;
1151 width: var(--loading-medium-dot-size, 8px); } }
1152
1153@-moz-keyframes nextVectorDotsYR-medium {
1154 25% {
1155 bottom: 0; }
1156 45%,
1157 50% {
1158 bottom: 11.2px;
1159 bottom: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1160 height: 9.6px;
1161 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1162 width: 9.6px;
1163 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1164 90% {
1165 bottom: 0;
1166 height: 8px;
1167 height: var(--loading-medium-dot-size, 8px);
1168 width: 8px;
1169 width: var(--loading-medium-dot-size, 8px); } }
1170
1171@-ms-keyframes nextVectorDotsYR-medium {
1172 25% {
1173 bottom: 0; }
1174 45%,
1175 50% {
1176 bottom: 11.2px;
1177 bottom: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1178 height: 9.6px;
1179 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1180 width: 9.6px;
1181 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1182 90% {
1183 bottom: 0;
1184 height: 8px;
1185 height: var(--loading-medium-dot-size, 8px);
1186 width: 8px;
1187 width: var(--loading-medium-dot-size, 8px); } }
1188
1189@-o-keyframes nextVectorDotsYR-medium {
1190 25% {
1191 bottom: 0; }
1192 45%,
1193 50% {
1194 bottom: 11.2px;
1195 bottom: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1196 height: 9.6px;
1197 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1198 width: 9.6px;
1199 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1200 90% {
1201 bottom: 0;
1202 height: 8px;
1203 height: var(--loading-medium-dot-size, 8px);
1204 width: 8px;
1205 width: var(--loading-medium-dot-size, 8px); } }
1206
1207@keyframes nextVectorDotsYR-medium {
1208 25% {
1209 bottom: 0; }
1210 45%,
1211 50% {
1212 bottom: 11.2px;
1213 bottom: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1214 height: 9.6px;
1215 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1216 width: 9.6px;
1217 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1218 90% {
1219 bottom: 0;
1220 height: 8px;
1221 height: var(--loading-medium-dot-size, 8px);
1222 width: 8px;
1223 width: var(--loading-medium-dot-size, 8px); } }
1224
1225@-webkit-keyframes nextVectorDotsY-medium {
1226 25% {
1227 top: 0; }
1228 45%,
1229 50% {
1230 top: 11.2px;
1231 top: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1232 height: 9.6px;
1233 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1234 width: 9.6px;
1235 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1236 90% {
1237 top: 0;
1238 height: 8px;
1239 height: var(--loading-medium-dot-size, 8px);
1240 width: 8px;
1241 width: var(--loading-medium-dot-size, 8px); } }
1242
1243@-moz-keyframes nextVectorDotsY-medium {
1244 25% {
1245 top: 0; }
1246 45%,
1247 50% {
1248 top: 11.2px;
1249 top: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1250 height: 9.6px;
1251 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1252 width: 9.6px;
1253 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1254 90% {
1255 top: 0;
1256 height: 8px;
1257 height: var(--loading-medium-dot-size, 8px);
1258 width: 8px;
1259 width: var(--loading-medium-dot-size, 8px); } }
1260
1261@-ms-keyframes nextVectorDotsY-medium {
1262 25% {
1263 top: 0; }
1264 45%,
1265 50% {
1266 top: 11.2px;
1267 top: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1268 height: 9.6px;
1269 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1270 width: 9.6px;
1271 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1272 90% {
1273 top: 0;
1274 height: 8px;
1275 height: var(--loading-medium-dot-size, 8px);
1276 width: 8px;
1277 width: var(--loading-medium-dot-size, 8px); } }
1278
1279@-o-keyframes nextVectorDotsY-medium {
1280 25% {
1281 top: 0; }
1282 45%,
1283 50% {
1284 top: 11.2px;
1285 top: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1286 height: 9.6px;
1287 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1288 width: 9.6px;
1289 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1290 90% {
1291 top: 0;
1292 height: 8px;
1293 height: var(--loading-medium-dot-size, 8px);
1294 width: 8px;
1295 width: var(--loading-medium-dot-size, 8px); } }
1296
1297@keyframes nextVectorDotsY-medium {
1298 25% {
1299 top: 0; }
1300 45%,
1301 50% {
1302 top: 11.2px;
1303 top: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1304 height: 9.6px;
1305 height: calc(var(--loading-medium-dot-size, 8px)*1.2);
1306 width: 9.6px;
1307 width: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1308 90% {
1309 top: 0;
1310 height: 8px;
1311 height: var(--loading-medium-dot-size, 8px);
1312 width: 8px;
1313 width: var(--loading-medium-dot-size, 8px); } }
1314
1315@-webkit-keyframes nextVectorDotsX-medium {
1316 25% {
1317 left: 0; }
1318 45%,
1319 50% {
1320 left: 11.2px;
1321 left: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1322 width: 9.6px;
1323 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1324 height: 9.6px;
1325 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1326 90% {
1327 left: 0;
1328 height: 8px;
1329 height: var(--loading-medium-dot-size, 8px);
1330 width: 8px;
1331 width: var(--loading-medium-dot-size, 8px); } }
1332
1333@-moz-keyframes nextVectorDotsX-medium {
1334 25% {
1335 left: 0; }
1336 45%,
1337 50% {
1338 left: 11.2px;
1339 left: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1340 width: 9.6px;
1341 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1342 height: 9.6px;
1343 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1344 90% {
1345 left: 0;
1346 height: 8px;
1347 height: var(--loading-medium-dot-size, 8px);
1348 width: 8px;
1349 width: var(--loading-medium-dot-size, 8px); } }
1350
1351@-ms-keyframes nextVectorDotsX-medium {
1352 25% {
1353 left: 0; }
1354 45%,
1355 50% {
1356 left: 11.2px;
1357 left: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1358 width: 9.6px;
1359 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1360 height: 9.6px;
1361 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1362 90% {
1363 left: 0;
1364 height: 8px;
1365 height: var(--loading-medium-dot-size, 8px);
1366 width: 8px;
1367 width: var(--loading-medium-dot-size, 8px); } }
1368
1369@-o-keyframes nextVectorDotsX-medium {
1370 25% {
1371 left: 0; }
1372 45%,
1373 50% {
1374 left: 11.2px;
1375 left: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1376 width: 9.6px;
1377 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1378 height: 9.6px;
1379 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1380 90% {
1381 left: 0;
1382 height: 8px;
1383 height: var(--loading-medium-dot-size, 8px);
1384 width: 8px;
1385 width: var(--loading-medium-dot-size, 8px); } }
1386
1387@keyframes nextVectorDotsX-medium {
1388 25% {
1389 left: 0; }
1390 45%,
1391 50% {
1392 left: 11.2px;
1393 left: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1394 width: 9.6px;
1395 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1396 height: 9.6px;
1397 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1398 90% {
1399 left: 0;
1400 height: 8px;
1401 height: var(--loading-medium-dot-size, 8px);
1402 width: 8px;
1403 width: var(--loading-medium-dot-size, 8px); } }
1404
1405@-webkit-keyframes nextVectorDotsXR-medium {
1406 25% {
1407 right: 0; }
1408 45%,
1409 50% {
1410 right: 11.2px;
1411 right: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1412 width: 9.6px;
1413 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1414 height: 9.6px;
1415 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1416 90% {
1417 right: 0;
1418 height: 8px;
1419 height: var(--loading-medium-dot-size, 8px);
1420 width: 8px;
1421 width: var(--loading-medium-dot-size, 8px); } }
1422
1423@-moz-keyframes nextVectorDotsXR-medium {
1424 25% {
1425 right: 0; }
1426 45%,
1427 50% {
1428 right: 11.2px;
1429 right: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1430 width: 9.6px;
1431 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1432 height: 9.6px;
1433 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1434 90% {
1435 right: 0;
1436 height: 8px;
1437 height: var(--loading-medium-dot-size, 8px);
1438 width: 8px;
1439 width: var(--loading-medium-dot-size, 8px); } }
1440
1441@-ms-keyframes nextVectorDotsXR-medium {
1442 25% {
1443 right: 0; }
1444 45%,
1445 50% {
1446 right: 11.2px;
1447 right: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1448 width: 9.6px;
1449 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1450 height: 9.6px;
1451 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1452 90% {
1453 right: 0;
1454 height: 8px;
1455 height: var(--loading-medium-dot-size, 8px);
1456 width: 8px;
1457 width: var(--loading-medium-dot-size, 8px); } }
1458
1459@-o-keyframes nextVectorDotsXR-medium {
1460 25% {
1461 right: 0; }
1462 45%,
1463 50% {
1464 right: 11.2px;
1465 right: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1466 width: 9.6px;
1467 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1468 height: 9.6px;
1469 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1470 90% {
1471 right: 0;
1472 height: 8px;
1473 height: var(--loading-medium-dot-size, 8px);
1474 width: 8px;
1475 width: var(--loading-medium-dot-size, 8px); } }
1476
1477@keyframes nextVectorDotsXR-medium {
1478 25% {
1479 right: 0; }
1480 45%,
1481 50% {
1482 right: 11.2px;
1483 right: calc(var(--loading-medium-size, 32px)/2 - var(--loading-medium-dot-size, 8px)*1.2/2);
1484 width: 9.6px;
1485 width: calc(var(--loading-medium-dot-size, 8px)*1.2);
1486 height: 9.6px;
1487 height: calc(var(--loading-medium-dot-size, 8px)*1.2); }
1488 90% {
1489 right: 0;
1490 height: 8px;
1491 height: var(--loading-medium-dot-size, 8px);
1492 width: 8px;
1493 width: var(--loading-medium-dot-size, 8px); } }