.loader {
  position: relative;
}
.load {
  display: inline-block;
  height: calc(var(--i) * 15);
  width: calc(var(--i) * 15);
  background-color: transparent;
  position: absolute;
  border-top: 5px rgb(47, 0, 255) solid;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: turn 2s infinite linear;
}

.load:nth-child(odd) {
  animation: turn 2s infinite linear reverse;
}

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