1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 | @import "../animate/scss/mixin.scss";
|
5 | @import "scss/mixin";
|
6 | @import "scss/variable";
|
7 | @import "./rtl.scss";
|
8 |
|
9 |
|
10 |
|
11 | #{$loading-prefix} {
|
12 | position: relative;
|
13 |
|
14 | &.#{$css-prefix}open {
|
15 | pointer-events: none;
|
16 | }
|
17 |
|
18 |
|
19 | #{$loading-prefix}-component {
|
20 | opacity: .7;
|
21 | -webkit-filter: blur(1px);
|
22 | filter: blur(1px);
|
23 |
|
24 | filter: "progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
|
25 |
|
26 | position: relative;
|
27 | pointer-events: none;
|
28 | }
|
29 |
|
30 | &-masker {
|
31 | position: absolute;
|
32 | top: 0;
|
33 | bottom: 0;
|
34 | left: 0;
|
35 | right: 0;
|
36 | z-index: 99;
|
37 | opacity: .2;
|
38 | background: #FFF;
|
39 | }
|
40 |
|
41 | &-inline {
|
42 | display: inline-block;
|
43 | }
|
44 |
|
45 | &-tip {
|
46 | display: block;
|
47 | position: absolute;
|
48 | top: 50%;
|
49 | left: 50%;
|
50 | z-index: 4;
|
51 | transform: translate(-50%, -50%);
|
52 | text-align: center;
|
53 | }
|
54 |
|
55 | &-tip-fullscreen {
|
56 | top: inherit;
|
57 | left: inherit;
|
58 | transform: inherit;
|
59 | }
|
60 |
|
61 | &-tip-placeholder {
|
62 | display: none;
|
63 | }
|
64 |
|
65 |
|
66 | &-right-tip {
|
67 | #{$loading-prefix}-indicator {
|
68 | display: inline-block;
|
69 | }
|
70 | #{$loading-prefix}-tip-content {
|
71 | position: absolute;
|
72 | display: block;
|
73 | top: 50%;
|
74 | right: 0;
|
75 | transform: translate(0, -50%);
|
76 | }
|
77 | #{$loading-prefix}-tip-placeholder {
|
78 | display: inline-block;
|
79 | visibility: hidden;
|
80 | margin-left: 1em;
|
81 | }
|
82 | }
|
83 |
|
84 | &-fusion-reactor {
|
85 | display: inline-block;
|
86 | width: $loading-large-size;
|
87 | height: $loading-large-size;
|
88 | position: relative;
|
89 | margin: 0;
|
90 |
|
91 | @include duration($loading-fusion-vector-seconds);
|
92 | @include count(infinite);
|
93 | @include function(linear);
|
94 |
|
95 | @include animation-name(nextVectorRoute);
|
96 |
|
97 | #{$loading-prefix}-dot {
|
98 | position: absolute;
|
99 | margin: auto;
|
100 | width: $loading-large-dot-size;
|
101 | height: $loading-large-dot-size;
|
102 | border-radius: 50%;
|
103 | background: $loading-dot-color;
|
104 |
|
105 | @include function(ease-in-out);
|
106 | @include count(infinite);
|
107 | @include duration($loading-fusion-vector-dot-seconds);
|
108 |
|
109 | &:nth-child(1) {
|
110 | top: 0;
|
111 | bottom: 0;
|
112 | left: 0;
|
113 | @include animation-name(nextVectorDotsX);
|
114 | }
|
115 | &:nth-child(2) {
|
116 | left: 0;
|
117 | right: 0;
|
118 | top: 0;
|
119 | opacity: .8;
|
120 | @include animation-name(nextVectorDotsY);
|
121 | }
|
122 | &:nth-child(3) {
|
123 | top: 0;
|
124 | bottom: 0;
|
125 | right: 0;
|
126 | opacity: .6;
|
127 | @include animation-name(nextVectorDotsXR);
|
128 | }
|
129 | &:nth-child(4) {
|
130 | left: 0;
|
131 | right: 0;
|
132 | bottom: 0;
|
133 | opacity: .2;
|
134 | @include animation-name( nextVectorDotsYR);
|
135 | }
|
136 | }
|
137 | }
|
138 |
|
139 | &-medium-fusion-reactor {
|
140 |
|
141 | width: $loading-medium-size;
|
142 | height: $loading-medium-size;
|
143 |
|
144 | #{$loading-prefix}-dot {
|
145 | width: $loading-medium-dot-size;
|
146 | height: $loading-medium-dot-size;
|
147 | &:nth-child(1) {
|
148 | @include animation-name(nextVectorDotsX-medium);
|
149 | }
|
150 | &:nth-child(2) {
|
151 | @include animation-name(nextVectorDotsY-medium);
|
152 | }
|
153 | &:nth-child(3) {
|
154 | @include animation-name(nextVectorDotsXR-medium);
|
155 | }
|
156 | &:nth-child(4) {
|
157 | @include animation-name(nextVectorDotsYR-medium);
|
158 | }
|
159 | }
|
160 | }
|
161 | }
|
162 |
|
163 | @include keyframes(nextVectorRoute) {
|
164 | 0% {
|
165 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 0));
|
166 | }
|
167 | 5% {
|
168 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 1));
|
169 | }
|
170 | 25% {
|
171 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 1));
|
172 | }
|
173 | 30% {
|
174 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 2));
|
175 | }
|
176 | 50% {
|
177 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 2));
|
178 | }
|
179 | 55% {
|
180 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 3));
|
181 | }
|
182 | 75% {
|
183 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 3));
|
184 | }
|
185 | 80% {
|
186 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 4));
|
187 | }
|
188 | 100% {
|
189 | @include transform(rotate(get-compiling-value($loading-fusion-vector-rotation-step) * 4));
|
190 | }
|
191 | }
|
192 |
|
193 |
|
194 | @include keyframes(nextVectorDotsYR) {
|
195 | @include loading-fusion(bottom, $loading-large-dot-size , calc(#{$loading-large-size} / 2 - #{$loading-large-dot-size} * 1.2 / 2), calc(#{$loading-large-dot-size} * 1.2));
|
196 | }
|
197 |
|
198 | @include keyframes(nextVectorDotsY) {
|
199 | @include loading-fusion(top, $loading-large-dot-size, calc(#{$loading-large-size} / 2 - #{$loading-large-dot-size} * 1.2 / 2), calc(#{$loading-large-dot-size} * 1.2));
|
200 | }
|
201 |
|
202 | @include keyframes(nextVectorDotsX) {
|
203 | @include loading-fusion(left, $loading-large-dot-size, calc(#{$loading-large-size} / 2 - #{$loading-large-dot-size} * 1.2 / 2), calc(#{$loading-large-dot-size} * 1.2));
|
204 | }
|
205 |
|
206 | @include keyframes(nextVectorDotsXR) {
|
207 | @include loading-fusion(right, $loading-large-dot-size, calc(#{$loading-large-size} / 2 - #{$loading-large-dot-size} * 1.2 / 2), calc(#{$loading-large-dot-size} * 1.2));
|
208 | }
|
209 |
|
210 | @include keyframes(nextVectorDotsYR-medium) {
|
211 | @include loading-fusion(bottom, $loading-medium-dot-size, calc(#{$loading-medium-size} / 2 - #{$loading-medium-dot-size} * 1.2 / 2), calc(#{$loading-medium-dot-size} * 1.2));
|
212 | }
|
213 |
|
214 | @include keyframes(nextVectorDotsY-medium) {
|
215 | @include loading-fusion(top, $loading-medium-dot-size ,calc(#{$loading-medium-size} / 2 - #{$loading-medium-dot-size} * 1.2 / 2), calc(#{$loading-medium-dot-size} * 1.2));
|
216 | }
|
217 |
|
218 | @include keyframes(nextVectorDotsX-medium) {
|
219 | @include loading-fusion(left, $loading-medium-dot-size ,calc(#{$loading-medium-size} / 2 - #{$loading-medium-dot-size} * 1.2 / 2), calc(#{$loading-medium-dot-size} * 1.2));
|
220 | }
|
221 |
|
222 | @include keyframes(nextVectorDotsXR-medium) {
|
223 | @include loading-fusion(right, $loading-medium-dot-size ,calc(#{$loading-medium-size} / 2 - #{$loading-medium-dot-size} * 1.2 / 2), calc(#{$loading-medium-dot-size} * 1.2));
|
224 | }
|