@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.spinner {
  height: 100vh;
  opacity: 1;
  position: relative;
  transition: opacity linear 0.1s;
}

.spinnerbefore {
  animation: 1.5s linear infinite spinner;
  border: solid 5px #eee;
  border-top-color: black;
  border-bottom-color: black;
  border-radius: 50%;
  content: "";
  height: 40px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  width: 40px;
  will-change: transform;
}