Loader by Nawsome

1.loadingspinner {
2  --square: 26px;
3  --offset: 30px;
4  --duration: 2.4s;
5  --delay: 0.2s;
6  --timing-function: ease-in-out;
7  --in-duration: 0.4s;
8  --in-delay: 0.1s;
9  --in-timing-function: ease-out;
10  width: calc( 3 * var(--offset) + var(--square));
11  height: calc( 2 * var(--offset) + var(--square));
12  padding: 0px;
13  margin-left: auto;
14  margin-right: auto;
15  margin-top: 10px;
16  margin-bottom: 30px;
17  position: relative;
18}
19
20.loadingspinner div {
21  display: inline-block;
22  background: darkorange;
23    /*background: var(--text-color);*/
24    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
25  border: none;
26  border-radius: 2px;
27  width: var(--square);
28  height: var(--square);
29  position: absolute;
30  padding: 0px;
31  margin: 0px;
32  font-size: 6pt;
33  color: black;
34}
35
36.loadingspinner #square1 {
37  left: calc( 0 * var(--offset) );
38  top: calc( 0 * var(--offset) );
39  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
40               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
41}
42
43.loadingspinner #square2 {
44  left: calc( 0 * var(--offset) );
45  top: calc( 1 * var(--offset) );
46  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
47              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
48}
49
50.loadingspinner #square3 {
51  left: calc( 1 * var(--offset) );
52  top: calc( 1 * var(--offset) );
53  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
54               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
55}
56
57.loadingspinner #square4 {
58  left: calc( 2 * var(--offset) );
59  top: calc( 1 * var(--offset) );
60  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
61               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
62}
63
64.loadingspinner #square5 {
65  left: calc( 3 * var(--offset) );
66  top: calc( 1 * var(--offset) );
67  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
68               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
69}
70
71@keyframes square1 {
72  0% {
73    left: calc( 0 * var(--offset) );
74    top: calc( 0 * var(--offset) );
75  }
76
77  8.333% {
78    left: calc( 0 * var(--offset) );
79    top: calc( 1 * var(--offset) );
80  }
81
82  100% {
83    left: calc( 0 * var(--offset) );
84    top: calc( 1 * var(--offset) );
85  }
86}
87
88@keyframes square2 {
89  0% {
90    left: calc( 0 * var(--offset) );
91    top: calc( 1 * var(--offset) );
92  }
93
94  8.333% {
95    left: calc( 0 * var(--offset) );
96    top: calc( 2 * var(--offset) );
97  }
98
99  16.67% {
100    left: calc( 1 * var(--offset) );
101    top: calc( 2 * var(--offset) );
102  }
103
104  25.00% {
105    left: calc( 1 * var(--offset) );
106    top: calc( 1 * var(--offset) );
107  }
108
109  83.33% {
110    left: calc( 1 * var(--offset) );
111    top: calc( 1 * var(--offset) );
112  }
113
114  91.67% {
115    left: calc( 1 * var(--offset) );
116    top: calc( 0 * var(--offset) );
117  }
118
119  100% {
120    left: calc( 0 * var(--offset) );
121    top: calc( 0 * var(--offset) );
122  }
123}
124
125@keyframes square3 {
126  0%,100% {
127    left: calc( 1 * var(--offset) );
128    top: calc( 1 * var(--offset) );
129  }
130
131  16.67% {
132    left: calc( 1 * var(--offset) );
133    top: calc( 1 * var(--offset) );
134  }
135
136  25.00% {
137    left: calc( 1 * var(--offset) );
138    top: calc( 0 * var(--offset) );
139  }
140
141  33.33% {
142    left: calc( 2 * var(--offset) );
143    top: calc( 0 * var(--offset) );
144  }
145
146  41.67% {
147    left: calc( 2 * var(--offset) );
148    top: calc( 1 * var(--offset) );
149  }
150
151  66.67% {
152    left: calc( 2 * var(--offset) );
153    top: calc( 1 * var(--offset) );
154  }
155
156  75.00% {
157    left: calc( 2 * var(--offset) );
158    top: calc( 2 * var(--offset) );
159  }
160
161  83.33% {
162    left: calc( 1 * var(--offset) );
163    top: calc( 2 * var(--offset) );
164  }
165
166  91.67% {
167    left: calc( 1 * var(--offset) );
168    top: calc( 1 * var(--offset) );
169  }
170}
171
172@keyframes square4 {
173  0% {
174    left: calc( 2 * var(--offset) );
175    top: calc( 1 * var(--offset) );
176  }
177
178  33.33% {
179    left: calc( 2 * var(--offset) );
180    top: calc( 1 * var(--offset) );
181  }
182
183  41.67% {
184    left: calc( 2 * var(--offset) );
185    top: calc( 2 * var(--offset) );
186  }
187
188  50.00% {
189    left: calc( 3 * var(--offset) );
190    top: calc( 2 * var(--offset) );
191  }
192
193  58.33% {
194    left: calc( 3 * var(--offset) );
195    top: calc( 1 * var(--offset) );
196  }
197
198  100% {
199    left: calc( 3 * var(--offset) );
200    top: calc( 1 * var(--offset) );
201  }
202}
203
204@keyframes square5 {
205  0% {
206    left: calc( 3 * var(--offset) );
207    top: calc( 1 * var(--offset) );
208  }
209
210  50.00% {
211    left: calc( 3 * var(--offset) );
212    top: calc( 1 * var(--offset) );
213  }
214
215  58.33% {
216    left: calc( 3 * var(--offset) );
217    top: calc( 0 * var(--offset) );
218  }
219
220  66.67% {
221    left: calc( 2 * var(--offset) );
222    top: calc( 0 * var(--offset) );
223  }
224
225  75.00% {
226    left: calc( 2 * var(--offset) );
227    top: calc( 1 * var(--offset) );
228  }
229
230  100% {
231    left: calc( 2 * var(--offset) );
232    top: calc( 1 * var(--offset) );
233  }
234}
235
236@keyframes squarefadein {
237  0% {
238    transform: scale(0.75);
239    opacity: 0.0;
240  }
241
242  100% {
243    transform: scale(1.0);
244    opacity: 1.0;
245  }
246}