Johnny/out/css/loader.css

/* Variables */
* {
    --loaderDivCol: var(--color-loader-text);

    --circR: 1rem;
    --circD: 2rem;
    --circ6D: 12rem;

    --timing: ease-in-out;
    --fullCycle: 5s;
}

.loader.hidden {
    display: none;
}

.loader {
    position: relative;

    box-sizing: border-box;
    height: var(--circD);
    width: var(--circ6D);

    margin: calc(var(--circD) * 3) var(--circD);
    padding: var(--circR) 0;
}

.loader > * {
    position: absolute;
    box-sizing: border-box;
    height: 0;
    width: calc(2 * var(--circD));
    opacity: 0;

    display: flex;
    justify-content: space-between;

    --keyframe-sequence: "loading0";
    --delay: 0;
    --animation: var(--keyframe-sequence) var(--fullCycle) var(--timing) calc(0s - var(--fullCycle) * (1 - (var(--delay)) / 8) ) infinite;

    -webkit-animation: var(--animation);
    -moz-animation: var(--animation);
    -ms-animation: var(--animation);
    -o-animation: var(--animation);
    animation: var(--animation);
}

.loader div::before,
.loader div::after {
    content: "";
    display: block;
    box-sizing: border-box;
    width:  var(--circD);
    height: var(--circD);
    border: 1px solid var(--loaderDivCol);
    background: var(--loaderDivCol);
    border-radius: 100%;

    position: absolute;
    top: calc(0px - var(--circR));
}

.loader div::before {
    left: calc(0px - var(--circR));
}
.loader div::after {
    right: calc(0px - var(--circR));
}


@keyframes loading0 {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    12.52% {
        opacity: 1;
    }
    12.56% {
        opacity: 0;
    }
    99.7% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes loading2 {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    7% {
        transform: rotate(180deg);
    }

    12.47% {
        opacity: 1;
    }
    12.56% {
        opacity: 0;
    }

    24.6% {
        opacity: 0;
    }
    24.97% {
        opacity: 1;
    }
    37.52% {
        opacity: 1;
    }
    37.57% {
        opacity: 0;
        transform: rotate(180deg);
    }

    99.95% {
        opacity: 0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
    }
}

@keyframes loading3 {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    7% {
        transform: rotate(180deg);
    }

    12.47% {
        opacity: 1;
    }
    12.52% {
        opacity: 1;
    }
    12.56% {
        opacity: 0;
    }

    37.4% {
        opacity: 0;
    }
    37.47% {
        opacity: 1;
    }
    50.02% {
        opacity: 1;
    }
    50.1% {
        opacity: 0;
        transform: rotate(180deg);
    }
    99.8% {
        opacity: 0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
    }
}

@keyframes loading5 {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(180deg);
    }

    12.47% {
        opacity: 1;
    }
    12.52% {
        opacity: 1;
    }
    12.58% {
        opacity: 0;
    }

    62.4% {
        opacity: 0;
    }
    62.47% {
        opacity: 1;
    }
    75.02% {
        opacity: 1;
    }
    75.1% {
        opacity: 0;
        transform: rotate(180deg);
    }
    99.7% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes loading6 {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    7% {
        transform: rotate(180deg);
    }

    12.47% {
        opacity: 1;
    }
    12.52% {
        opacity: 1;
    }
    12.57% {
        opacity: 0;
    }

    74.85% {
        opacity: 0;
    }
    74.97% {
        opacity: 1;
    }
    87.52% {
        opacity: 1;
    }
    87.6% {
        opacity: 0;
        transform: rotate(180deg);
    }
    99.8% {
        opacity: 0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
    }
}

.loader :nth-child(1) {
    width: 66.66%;
    --keyframe-sequence: "loading5";
    --delay: 0;
}
.loader :nth-child(2) {
    width: 66.66%;
    margin-left: 0;
    --keyframe-sequence: "loading2";
    --delay: 0;
}
.loader :nth-child(3) {
    width: 33.33%;
    margin-left: 33.33%;
    --keyframe-sequence: "loading2";
    --delay: 1;
}
.loader :nth-child(4) {
    width: 66.66%;
    margin-left: 33.33%;
    --keyframe-sequence: "loading6";
    --delay: 2;
}

.loader :nth-child(5) {
    width: 100%;
    --keyframe-sequence: "loading6";
    --delay: 3;
}
.loader :nth-child(6) {
    width: 100%;
    --keyframe-sequence: "loading3";
    --delay: 3;
}
.loader :nth-child(7) {
    width: 33.33%;
    --keyframe-sequence: "loading3";
    --delay: 4;
}
.loader :nth-child(8) {
    width: 66.66%;
    margin-left: 33.33%;
    --keyframe-sequence: "loading3";
    --delay: 5;
}
.loader :nth-child(9) {
    width: 33.33%;
    margin-left: 33.33%;
    --keyframe-sequence: "loading5";
    --delay: 6;
}
.loader :nth-child(10) {
    width: 33.33%;
    margin-left: 66.66%;
    --keyframe-sequence: "loading5";
    --delay: 7;
}