1.spinner {
2 height: 50px;
3 width: max-content;
4 font-size: 18px;
5 font-weight: 600;
6 font-family: monospace;
7 letter-spacing: 1em;
8 color: #f5f5f5;
9 filter: drop-shadow(0 0 10px);
10 display: flex;
11 justify-content: center;
12 align-items: center;
13}
14
15.spinner span {
16 animation: loading6454 1.75s ease infinite;
17}
18
19.spinner span:nth-child(2) {
20 animation-delay: 0.25s;
21}
22
23.spinner span:nth-child(3) {
24 animation-delay: 0.5s;
25}
26
27.spinner span:nth-child(4) {
28 animation-delay: 0.75s;
29}
30
31.spinner span:nth-child(5) {
32 animation-delay: 1s;
33}
34
35.spinner span:nth-child(6) {
36 animation-delay: 1.25s;
37}
38
39.spinner span:nth-child(7) {
40 animation-delay: 1.5s;
41}
42
43@keyframes loading6454 {
44 0%, 100% {
45  transform: translateY(0);
46 }
47
48 50% {
49  transform: translateY(-10px);
50 }
51}