1.spinner {
2  --size: 30px;
3  --first-clr: #005bba;
4  --second-clr: #fed500;
5  width: 100px;
6  height: 100px;
7  position: relative;
8}
9
10.spinner::before,
11.spinner::after {
12  content: "";
13  width: var(--size);
14  height: var(--size);
15  border: 6px solid var(--first-clr);
16  position: absolute;
17  top: 50%;
18  left: calc(var(--size));
19  transform: translate(-50%, -50%);
20  animation: kf-spin 1s linear infinite;
21  border-radius: 50% 80% 50% 70%;
22  box-sizing: border-box;
23}
24
25.spinner::after {
26  top: 50%;
27  left: calc(var(--size) * 2);
28  border: 6px solid var(--second-clr);
29  animation: kf-spin 1s linear infinite reverse;
30}
31
32@keyframes kf-spin {
33  0% {
34    transform: rotate(0deg);
35  }
36  100% {
37    transform: rotate(360deg);
38  }
39}
40