.spinner {
 --size-of-spinner: 50px;
 --spinner-border-width: 4px;
 --spinner-color: #08c18a;
 --circle-color: #8bc34a24;
 --speed-of-animation: 2s;
 --scale: 1.3;
 width: var(--size-of-spinner);
 height: var(--size-of-spinner);
 background: var(--circle-color);
 border-radius: 50%;
 position: relative;
}

.spinner::after {
 content: "";
 display: block;
 position: absolute;
 border-radius: 50%;
 inset: 0;
 border: var(--spinner-border-width) solid var(--spinner-color);
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spinny var(--speed-of-animation) linear infinite;
}

@keyframes spinny {
 0% {
  transform: rotate(0deg) scale(1)
 }

 50% {
  transform: rotate(45deg) scale(var(--scale))
 }

 100% {
  transform: rotate(360deg) scale(1)
 }
}