1.spinner {
2 --size-of-spinner: 50px;
3 --spinner-border-width: 4px;
4 --spinner-color: #08c18a;
5 --circle-color: #8bc34a24;
6 --speed-of-animation: 2s;
7 --scale: 1.3;
8 width: var(--size-of-spinner);
9 height: var(--size-of-spinner);
10 background: var(--circle-color);
11 border-radius: 50%;
12 position: relative;
13}
14
15.spinner::after {
16 content: "";
17 display: block;
18 position: absolute;
19 border-radius: 50%;
20 inset: 0;
21 border: var(--spinner-border-width) solid var(--spinner-color);
22 border-left-color: transparent;
23 border-right-color: transparent;
24 animation: spinny var(--speed-of-animation) linear infinite;
25}
26
27@keyframes spinny {
28 0% {
29  transform: rotate(0deg) scale(1)
30 }
31
32 50% {
33  transform: rotate(45deg) scale(var(--scale))
34 }
35
36 100% {
37  transform: rotate(360deg) scale(1)
38 }
39}