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