loading.css (7730B)
1 /* Loading Animation */
2 .wrapper-loading {
3 position: relative;
4 margin: auto;
5 width: 100%;
6 aspect-ratio: 1/1;
7 max-width: 400px;
8 min-width: 100px;
9 background-color: transparent;
10 border: none;
11 }
12 .wrapper-loading .box-wrap {
13 width: 70%;
14 height: 70%;
15 margin: calc((100% - 70%) / 2) calc((100% - 70%) / 2);
16 position: relative;
17 transform: rotate(-45deg);
18 }
19 .wrapper-loading .box-wrap .box {
20 width: 100%;
21 height: 100%;
22 position: absolute;
23 left: 0;
24 top: 0;
25 background: rgba(135, 0, 0, 0.6);
26 background: linear-gradient(
27 to right,
28 #0D47A1,
29 #3D5C80,
30 #6D7260,
31 #9E8740,
32 #CE9D20,
33 #FFB300,
34 #CE9D20,
35 #9E8740,
36 #6D7260,
37 #3D5C80,
38 #0D47A1
39 );
40 background-position: 0% 50%;
41 background-size: 1000% 1000%;
42 visibility: hidden;
43 }
44 .wrapper-loading .box-wrap .box.one {
45 animation: moveGradient 15s infinite, oneMove 3.5s infinite;
46 }
47 .wrapper-loading .box-wrap .box.two {
48 animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
49 }
50 .wrapper-loading .box-wrap .box.three {
51 animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
52 }
53 .wrapper-loading .box-wrap .box.four {
54 animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
55 }
56 .wrapper-loading .box-wrap .box.five {
57 animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
58 }
59 .wrapper-loading .box-wrap .box.six {
60 animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
61 }
62
63 @keyframes moveGradient {
64 to {
65 background-position: 100% 50%;
66 }
67 }
68
69 @keyframes oneMove {
70 0% {
71 visibility: visible;
72 clip-path: inset(0% 35% 70% round 5%);
73 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
74 }
75 14.2857% {
76 clip-path: inset(0% 35% 70% round 5%);
77 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
78 }
79 28.5714% {
80 clip-path: inset(35% round 5%);
81 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
82 }
83 42.8571% {
84 clip-path: inset(35% 70% 35% 0 round 5%);
85 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
86 }
87 57.1428% {
88 clip-path: inset(35% 70% 35% 0 round 5%);
89 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
90 }
91 71.4285% {
92 clip-path: inset(0% 70% 70% 0 round 5%);
93 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
94 }
95 85.7142% {
96 clip-path: inset(0% 70% 70% 0 round 5%);
97 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
98 }
99 100% {
100 clip-path: inset(0% 35% 70% round 5%);
101 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
102 }
103 }
104
105 @keyframes twoMove {
106 0% {
107 visibility: visible;
108 clip-path: inset(0% 70% 70% 0 round 5%);
109 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
110 }
111 14.2857% {
112 clip-path: inset(0% 70% 70% 0 round 5%);
113 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
114 }
115 28.5714% {
116 clip-path: inset(0% 35% 70% round 5%);
117 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
118 }
119 42.8571% {
120 clip-path: inset(0% 35% 70% round 5%);
121 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
122 }
123 57.1428% {
124 clip-path: inset(35% round 5%);
125 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
126 }
127 71.4285% {
128 clip-path: inset(35% 70% 35% 0 round 5%);
129 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
130 }
131 85.7142% {
132 clip-path: inset(35% 70% 35% 0 round 5%);
133 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
134 }
135 100% {
136 clip-path: inset(0% 70% 70% 0 round 5%);
137 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
138 }
139 }
140
141 @keyframes threeMove {
142 0% {
143 visibility: visible;
144 clip-path: inset(35% 70% 35% 0 round 5%);
145 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
146 }
147 14.2857% {
148 clip-path: inset(35% 70% 35% 0 round 5%);
149 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
150 }
151 28.5714% {
152 clip-path: inset(0% 70% 70% 0 round 5%);
153 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
154 }
155 42.8571% {
156 clip-path: inset(0% 70% 70% 0 round 5%);
157 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
158 }
159 57.1428% {
160 clip-path: inset(0% 35% 70% round 5%);
161 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
162 }
163 71.4285% {
164 clip-path: inset(0% 35% 70% round 5%);
165 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
166 }
167 85.7142% {
168 clip-path: inset(35% round 5%);
169 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
170 }
171 100% {
172 clip-path: inset(35% 70% 35% 0 round 5%);
173 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
174 }
175 }
176
177 @keyframes fourMove {
178 0% {
179 visibility: visible;
180 clip-path: inset(35% 0% 35% 70% round 5%);
181 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
182 }
183 14.2857% {
184 clip-path: inset(35% 0% 35% 70% round 5%);
185 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
186 }
187 28.5714% {
188 clip-path: inset(35% round 5%);
189 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
190 }
191 42.8571% {
192 clip-path: inset(70% 35% 0% 35% round 5%);
193 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
194 }
195 57.1428% {
196 clip-path: inset(70% 35% 0% 35% round 5%);
197 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
198 }
199 71.4285% {
200 clip-path: inset(70% 0 0 70% round 5%);
201 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
202 }
203 85.7142% {
204 clip-path: inset(70% 0 0 70% round 5%);
205 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
206 }
207 100% {
208 clip-path: inset(35% 0% 35% 70% round 5%);
209 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
210 }
211 }
212
213 @keyframes fiveMove {
214 0% {
215 visibility: visible;
216 clip-path: inset(70% 0 0 70% round 5%);
217 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
218 }
219 14.2857% {
220 clip-path: inset(70% 0 0 70% round 5%);
221 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
222 }
223 28.5714% {
224 clip-path: inset(35% 0% 35% 70% round 5%);
225 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
226 }
227 42.8571% {
228 clip-path: inset(35% 0% 35% 70% round 5%);
229 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
230 }
231 57.1428% {
232 clip-path: inset(35% round 5%);
233 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
234 }
235 71.4285% {
236 clip-path: inset(70% 35% 0% 35% round 5%);
237 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
238 }
239 85.7142% {
240 clip-path: inset(70% 35% 0% 35% round 5%);
241 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
242 }
243 100% {
244 clip-path: inset(70% 0 0 70% round 5%);
245 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
246 }
247 }
248
249 @keyframes sixMove {
250 0% {
251 visibility: visible;
252 clip-path: inset(70% 35% 0% 35% round 5%);
253 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
254 }
255 14.2857% {
256 clip-path: inset(70% 35% 0% 35% round 5%);
257 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
258 }
259 28.5714% {
260 clip-path: inset(70% 0 0 70% round 5%);
261 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
262 }
263 42.8571% {
264 clip-path: inset(70% 0 0 70% round 5%);
265 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
266 }
267 57.1428% {
268 clip-path: inset(35% 0% 35% 70% round 5%);
269 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
270 }
271 71.4285% {
272 clip-path: inset(35% 0% 35% 70% round 5%);
273 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
274 }
275 85.7142% {
276 clip-path: inset(35% round 5%);
277 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
278 }
279 100% {
280 clip-path: inset(70% 35% 0% 35% round 5%);
281 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
282 }
283 }
