/*  spinner */
.ws_loader {
    position: absolute;
    z-index: 99999;
    top: 2rem;
    left: calc(50% - 4rem);
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    color: var(--yellow);
}
.ws_loader:before,
.ws_loader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.ws_loader:after {
  color: var(--text-color);
  transform: rotateY(70deg);
  animation-delay: .4s;
}

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .5em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .5em .5em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .5em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.5em .5em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.5em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.5em -.5em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.5em 0 0 currentcolor;
    }
    87% {
      box-shadow: .5em -.5em 0 0 currentcolor;
    }
  }