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  animation: spin 2s linear infinite;
10}
11
12.spinner::after,
13.spinner::before {
14  box-sizing: border-box;
15  position: absolute;
16  content: "";
17  width: var(--size);
18  height: var(--size);
19  top: 50%;
20  left: 50%;
21  background: var(--first-block-clr);
22  border-radius: 50%;
23  transform: translate(-50%, -50%);
24  animation: orbit 2s linear infinite, up 2s infinite;
25}
26
27.spinner::after {
28  background: var(--second-block-clr);
29  animation: orbit 2s linear infinite, down 2s infinite;
30}
31
32@keyframes orbit {
33  0% {
34    transform: rotate(0deg);
35  }
36  100% {
37    transform: rotate(360deg);
38  }
39}
40
41@keyframes down {
42  0%,
43  100% {
44    transform: none;
45  }
46
47  25% {
48    transform: translateX(100%);
49  }
50
51  50% {
52    transform: translateX(100%) translateY(100%);
53    filter: blur(10px);
54  }
55
56  75% {
57    transform: translateY(100%);
58  }
59}
60
61@keyframes up {
62  0%,
63  100% {
64    transform: none;
65  }
66
67  25% {
68    transform: translateX(-100%);
69  }
70
71  50% {
72    transform: translateX(-100%) translateY(-100%);
73    filter: blur(10px);
74  }
75
76  75% {
77    transform: translateY(-100%);
78  }
79}
80
81@keyframes spin {
82  0% {
83    transform: rotate(0deg);
84  }
85  100% {
86    transform: rotate(360deg);
87  }
88}
89