.bigpreload{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width:50px;
    height:50px;
}
.bigpreload hr{border:2px solid #fff;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:preloadspin 2s ease infinite}

.bigpreload :first-child{background:var(--main-color);animation-delay:-1.5s}
.bigpreload :nth-child(2){background:rgba(247, 167, 0, 1);animation-delay:-1s}
.bigpreload :nth-child(3){background:#208B77;animation-delay:-0.5s}
.bigpreload :last-child{background:#5579ff}

@keyframes preloadspin{
    0%,100%{transform:translate(0)}
    25%{transform:translate(160%)}
    50%{transform:translate(160%, 160%)}
    75%{transform:translate(0, 160%)}
}





/*.preload-container{*/
/*    height:100%;*/
/*    width:100%;*/
/*    display:flex;*/
/*    opacity:1;*/

/*}*/

/*#preload-loader{*/
/*    margin:auto;*/
/*    position:relative;*/
/*    animation: rotation 4s linear infinite;*/
/*    transform-origin: center;*/
/*    width: 100px;*/
/*    height:100px;*/
/*    animation-delay:0s;*/
/*    opacity:.8;*/
/*}*/

/*.preload.dot{*/
/*    position:absolute;*/
/*    width:100%;*/
/*    height:100%;*/
/*    !* 		mix-blend-mode:color-dodge; *!*/
/*    border-radius:100%;*/
/*    animation-timing-function:ease-in-out;*/

/*}*/


/*.preload.white{*/
/*    background-color:#cccccc;*/
/*    animation-name:slideV;*/
/*    animation-duration:1s;*/
/*    animation-iteration-count: infinite;*/
/*    animation-direction: alternate;*/
/*    animation-delay:0s;*/
/*}*/

/*.preload.black{*/
/*    background-color:#9f9f9f;*/
/*    animation-name:slideH;*/
/*    animation-duration:1s;*/
/*    animation-iteration-count: infinite;*/
/*    animation-direction: alternate;*/
/*    animation-delay:0s;*/
/*}*/
/*.preload.dark{*/
/*    background-color:var(--main-color);*/
/*    animation-name:slideVs;*/
/*    animation-duration:1s;*/
/*    animation-iteration-count: infinite;*/
/*    animation-direction: alternate;*/
/*    animation-delay:0s;*/
/*}*/


/*!* 		.magenta{*/
/*            background-color:#4f4f4f;*/
/*            animation-name:slideV;*/
/*            animation-duration:1s;*/
/*            animation-iteration-count: infinite;*/
/*            animation-direction: alternate;*/
/*            // animation-delay:0s;*/
/*        }*/
/*.yellow{*/
/*            background-color:#1f1f1f;*/
/*            animation-name:slideH;*/
/*            animation-duration:1s;*/
/*            animation-iteration-count: infinite;*/
/*            animation-direction: alternate;*/
/*            animation-delay:0s;*/
/*        } *!*/



/*@keyframes slideH{*/
/*    from{*/
/*        transform: scale(0.4);*/
/*    }*/

/*    50%{*/
/*        transform: scale(.7);*/
/*    }*/

/*    to{*/
/*        transform: scale(0.4);*/
/*    }*/
/*}*/

/*@keyframes slideV{*/
/*    from{*/
/*        transform: scale(0.2) translate(-300px,0px);*/
/*    }*/

/*    50%{*/
/*        transform: scale(.1);*/

/*    }*/

/*    to{*/
/*        transform: scale(0.2) translate(300px,0px);*/
/*    }*/
/*}*/
/*@keyframes slideVs{*/
/*    from{*/
/*        transform: scale(.3);*/
/*    }*/

/*    50%{*/
/*        transform: scale(.4);*/
/*    }*/

/*    to{*/
/*        transform: scale(.5);*/
/*    }*/
/*}*/


/*@keyframes rotation{*/
/*    from{*/
/*        transform: rotate(0);*/

/*    }*/


/*    to{*/
/*        transform: rotate(360deg);*/

/*    }*/
/*}*/