.thewebcreative_spinner {
  width: 35px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 3px #c50909 inset;
  border-radius: 50%;
  position: relative;
  animation: l6 2.5s linear infinite;
}
.thewebcreative_spinner:before,
.thewebcreative_spinner:after {
  content: "";
  position: absolute;
  top: 100%;
  box-shadow: inherit;
  width: 25px;

  aspect-ratio: 1;
  box-shadow: 0 0 0 3px #4f4f4f inset;
  border-radius: 100%;
  animation: l7 2.5s linear infinite;
}
.thewebcreative_spinner:after {
  position: absolute;
  top: 55%;
  width: 19px;
  transform: translateX(80%);
  animation-delay: -0.75s;
  box-shadow: 0 0 0 3px #000000 inset;
  animation: l8 2.5s linear infinite;
}

@keyframes l7 {
  to {
    transform: rotate(-45deg);
  }
}

@keyframes l6 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes l7 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes l8 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.5;
  }
}