1.spinner {
2  --size: 30px;
3  --first: #005bba;
4  --second: #fed500;
5  width: 50px;
6  height: 50px;
7  position: relative;
8  animation: spin 2s linear infinite;
9}
10
11.spinner::before,
12.spinner::after {
13  content: "";
14  width: var(--size);
15  height: var(--size);
16  background: var(--first);
17  border-radius: 100%;
18  position: absolute;
19  top: 10%;
20  transform: translateY(-50%);
21  animation: bounce 1s ease-in-out alternate infinite;
22}
23
24.spinner::after {
25  background: var(--second);
26
27  animation: bounce 1s 0.5s ease-in-out alternate infinite;
28}
29
30@keyframes bounce {
31  50% {
32    transform: translateX(-50%);
33  }
34}
35
36@keyframes spin {
37  100% {
38    transform: rotate(360deg);
39  }
40}
41