.preloader {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .6);
    z-index: 999;
}

.preloader>div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.preloader>div>div {
   width: 11px;
   height: 11px;
   animation: anim-o824ag 1s infinite linear;
}

.preloader>div>div>div {
   position: absolute;
   width: 100%;
   height: 100%;
   background: royalblue;
   border-radius: 50%;
   animation: anim-vse6n7 1.25s infinite ease;
}

.preloader>div>div>div:nth-child(1) {
   --rotation: 90;
}

.preloader>div>div>div:nth-child(2) {
   --rotation: 180;
}

.preloader>div>div>div:nth-child(3) {
   --rotation: 270;
}

.preloader>div>div>div:nth-child(4) {
   --rotation: 360;
}

@keyframes anim-vse6n7 {
   0%, 100% {
      transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
   }

   50% {
      transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
   }
}

@keyframes anim-o824ag {
   to {
      transform: rotate(360deg);
   }
}