1.spinner {
2  --size: 30px;
3  --color: white;
4  width: 100px;
5  height: 100px;
6  position: relative;
7}
8
9.spinner::after,.spinner::before {
10  box-sizing: border-box;
11  position: absolute;
12  content: "";
13  width: var(--size);
14  height: var(--size);
15  top: 50%;
16  animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
17  left: 50%;
18  background: var(--color);
19  box-shadow: 0 0 calc(var(--size) / 3) rgba(0, 0, 0, 0.25);
20}
21
22.spinner::after {
23  background: var(--color);
24  top: calc(50% - var(--size));
25  left: calc(50% - var(--size));
26  animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
27}
28
29@keyframes down {
30  0%, 100% {
31    transform: none;
32  }
33
34  25% {
35    transform: translateX(100%);
36  }
37
38  50% {
39    transform: translateX(100%) translateY(100%);
40  }
41
42  75% {
43    transform: translateY(100%);
44  }
45}
46
47@keyframes up {
48  0%, 100% {
49    transform: none;
50  }
51
52  25% {
53    transform: translateX(-100%);
54  }
55
56  50% {
57    transform: translateX(-100%) translateY(-100%);
58  }
59
60  75% {
61    transform: translateY(-100%);
62  }
63}
64