#preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: $color_black;
}

  
.blook-circular-preloader {
    top: 50%;
    left: 50%;
    z-index: 1;
    height: 30px;
    width: 30px;
    position: absolute;
    @include transform(translate(-50%,-50%));    
    span {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: block;
        position: absolute;
        @include transform(translate(50%, 50%) scale(0.5));
        left: -20px;
    }
    .circle-1 {
        z-index: 4;
        background-color: $color_light_gray;
        @include animationPreloader(animateSway 2s infinite ease-in-out,animateScale 2s infinite ease-in-out);
      }
   
    .circle-2 {
        z-index: 3;
        @include transform(translate(50%, 50%) scale(0.5));
        @include animationPreloader(animateSway 2s infinite ease-in-out 500ms, animateScale 2s infinite ease-in-out 500ms);
    }
    .circle-3 {
        z-index: 2;
        background-color: $color_shade;
        @include animationPreloader(animateSway 2s infinite ease-in-out 1s, animateScale 2s infinite ease-in-out 1s);
    }
    .circle-4 {
        z-index: 1;
        @include animationPreloader(animateSway 2s infinite ease-in-out 1.5s, animateScale 2s infinite ease-in-out 1.5s);
    }
}