.loader {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1117;
    display: block;
    animation: none;
    opacity: 1;
    transition: .5s ease-in-out;
}

.loader.remove {
    opacity: 0; 
    z-index: -1000;
}

.loader .c {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 7px solid;
    border-right: 7px solid;
    border-top: 7px solid transparent !important;
    border-left: 7px solid transparent !important;
    animation: rot 1.5s ease-in-out 0s infinite alternate;
}

@keyframes rot {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(90deg);
    }
}

.loader .c.c1 {
    width: 300px;
    height: 300px;
    border-color: orangered;
    animation-delay: 0s;
}

.loader .c.c2 {
    width: 260px;
    height: 260px;
    border-color: indigo;
    animation-delay: .1s;
}

.loader .c.c3 {
    width: 220px;
    height: 220px;
    border-color: dodgerblue;
    animation-delay: .2s;
}

.loader .c.c4 {
    width: 180px;
    height: 180px;
    border-color: green;
    animation-delay: .3s;
}

.loader .c.c5 {
    width: 140px;
    height: 140px;
    border-color: gold;
    animation-delay: .4s;
}

.loader .c.c6 {
    width: 100px;
    height: 100px;
    border-color: aqua;
    animation-delay: .5s;
}