body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.spinner {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.spinner span {
  position: absolute;
  top: 50%;
  left: var(--left);
  width: 35px;
  height: 7px;
  background-color: #ffff;
  animation: spinner 1.2s ease infinite;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.9);
}

.spinner span:nth-child(1) {
  --left: 80px;
  animation-delay: 0.125s;
}
.spinner span:nth-child(2) {
  --left: 70px;
  animation-delay: 0.3s;
}
.spinner span:nth-child(3) {
  left: 60px;
  animation-delay: 0.425s;
}
.spinner span:nth-child(4) {
  left: 50px;
  animation-delay: 0.55s;
}
.spinner span:nth-child(5) {
  left: 40px;
  animation-delay: 0.675s;
}
.spinner span:nth-child(6) {
  left: 30px;
  animation-delay: 0.8s;
}


@keyframes spinner {
  50% {
    opacity: 0.7;
  }
  75% {
    transform: rotate(90deg);
  }
  80% {
    opacity: 1;
  }
}