:root{
    --factor: 2;
    --color: rgb(0, 110, 181);
    /*#660066*/
}
#loader{
    height: 100px;
    width: 100px;
    left: 50%;
    top: 50%;
    transform: translateX(-10%);
    position: absolute;
    /*background:blue;*/
}

/*Square 6*/
#loader span{
    display: block;
    position: absolute;
    width: calc(10px*var(--factor));
    height: calc(10px*var(--factor));
    border-radius: 50%;
    background-color: var(--color);
}
#loader span:nth-child(1){
    animation: s6animation1 2.5s ease-in-out infinite;
}
#loader span:nth-child(2){
    animation: s6animation2 2.5s ease-in-out infinite;
}
#loader span:nth-child(3){
    animation: s6animation3 2.5s ease-in-out infinite;
}
#loader span:nth-child(4){
    animation: s6animation4 2.5s ease-in-out infinite;
}
#loader span:nth-child(5){
    animation: s6animation5 2.5s ease-in-out infinite;
}
#loader span:nth-child(6){
    animation: s6animation6 2.5s ease-in-out infinite;
}
#loader span:nth-child(7){
    animation: s6animation7 2.5s ease-in-out infinite;
}
#loader span:nth-child(8){
    animation: s6animation8 2.5s ease-in-out infinite;
}
@keyframes s6animation1 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(20px*var(--factor)),calc(-20px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(20px*var(--factor)),calc(20px*var(--factor)),0) rotate(90deg);
    }
}
@keyframes s6animation2 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(-20px*var(--factor)),calc(20px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(-20px*var(--factor)),calc(-20px*var(--factor)),0) rotate(90deg);
    }
}
@keyframes s6animation3 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(20px*var(--factor)),calc(20px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(-20px*var(--factor)),calc(20px*var(--factor)),0) rotate(90deg);
    }

}
@keyframes s6animation4 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(-20px*var(--factor)),calc(-20px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(20px*var(--factor)),calc(-20px*var(--factor)),0) rotate(90deg);
    }
}
@keyframes s6animation5 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(0,calc(-25px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(25px*var(--factor)),0,0) rotate(90deg);
    }
}
@keyframes s6animation6 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(25px*var(--factor)),0,0);
    }
    80%{
        transform: translate3d(0,calc(25px*var(--factor)),0) rotate(90deg);
    }
}
@keyframes s6animation7 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(0,calc(25px*var(--factor)),0);
    }
    80%{
        transform: translate3d(calc(-25px*var(--factor)),0,0) rotate(90deg);
    }
}
@keyframes s6animation8 {
    0%,100%{
        transform: translate3d(0, 0, 0);
    }
    30%,40%{
        transform: translate3d(calc(-25px*var(--factor)),0,0);
    }
    80%{
        transform: translate3d(0,calc(-25px*var(--factor)),0) rotate(90deg);
    }
}