1.spinner {
2  --size: 30px;
3  --first: #005bba;
4  --second: #fed500;
5  width: 100px;
6  height: 100px;
7  position: relative;
8  animation: spin 3s linear infinite;
9}
10
11.spinner::before,
12.spinner::after {
13  content: "";
14  width: var(--size);
15  height: var(--size);
16  border: 4px solid var(--first);
17  border-top: 4px solid var(--second);
18  border-radius: 50%;
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  transform: translate(-50%, -50%);
23  animation: spinRing 1.5s ease-out infinite;
24  box-shadow: 0 0 10px var(--first);
25}
26
27.spinner::before {
28  filter: blur(10px);
29}
30
31@keyframes spinRing {
32  0% {
33    transform: translate(-50%, -50%) rotate(0deg);
34  }
35  100% {
36    transform: translate(-50%, -50%) rotate(360deg);
37  }
38}
39
40@keyframes spin {
41  0% {
42    transform: rotate(0deg);
43  }
44  100% {
45    transform: rotate(360deg);
46  }
47}
48