Johnny/out/css/roller.css

/*
    Roller
    */

* {
    --loaderDivCol: #eee;

    --circD: 1rem;
    --circ6D: 6rem;
    --circR: 0.5rem;

    --scrollbarBG:   #f5f5f5;
    --thumbBG:       #C1DCEA;
}

#elm {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.roller {
    margin: 2.5rem 0;
}

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

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

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

    24.97% {
        opacity: 0;
    }
    25.02% {
        opacity: 1;
    }

    37.47% {
        opacity: 1;
    }
    37.52% {
        opacity: 0;
    }

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

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

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

    37.47% {
        opacity: 0;
    }
    37.52% {
        opacity: 1;
    }

    49.97% {
        opacity: 1;
    }
    50.02% {
        opacity: 0;
    }

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

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

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

    62.47% {
        opacity: 0;
    }
    62.52% {
        opacity: 1;
    }

    74.97% {
        opacity: 1;
    }
    75.02% {
        opacity: 0;
    }

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

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

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

    74.97% {
        opacity: 0;
    }
    75.02% {
        opacity: 1;
    }

    87.47% {
        opacity: 1;
    }
    87.52% {
        opacity: 0;
    }

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

.loader {
    position: relative;
    height: var(--circD);
    width: var(--circ6D);
    padding: var(--circR) 0;
    box-sizing: border-box;
    z-index: -1;
}


.loader :nth-child(n) {
    position: absolute;
    opacity: 0;
    box-sizing: border-box;
    width: 0;

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

    position: absolute;
    top: var(--circR);
}
    
.loader div::before {
    left: calc(-var(--circR));
}
.loader div::after {
    right: calc(-var(--circR));
}


.loader :nth-child(1) {
    width: 66.66%;
    /*^{animation "loading5" (timeDiv 0)}*/

    --timing: "cubic-bezier(.39,.58,.57,1)";
    --fullCycle: "4s";
    --animation: "loading5" var(--fullCycle) var(--timing) calc(-(var(--fullCycle) * 1 / 8 )) infinite;
    -webkit-animation: var(--animation);
    -moz-animation: var(--animation);
    -ms-animation: var(--animation);
    -o-animation: var(--animation);
    animation: var(--animation);

    /*- fromInteger fullDiv * (1 - (fromInteger a) / 8 )*/
}
.loader :nth-child(2) {
    width: 66.66%;
    margin-left: 0;
    /*^{animation "loading2"  (timeDiv 0)}*/
}
.loader :nth-child(3) {
    width: 33.33%
    margin-left: 33.33%
    /*^{animation "loading2" (timeDiv 1)}*/
}
.loader :nth-child(4) {
    width: 66.66%
    margin-left: 33.33%
    /*^{animation "loading6" (timeDiv 2)}*/
}


.loader :nth-child(5) {
    width: 100%
    /*^{animation "loading6" (timeDiv 3)} */
}
.loader :nth-child(6) {
    width: 100%
    /*^{animation "loading3" (timeDiv 3)}*/
}
.loader :nth-child(7) {
    width: 33.33%
    /*^{animation "loading3" (timeDiv 4)}*/
}
.loader :nth-child(8) {
    width: 66.66%
    margin-left: 33.33%
    /*^{animation "loading3" (timeDiv 5)}*/
}
.loader :nth-child(9) {
    width: 33.33%
    margin-left: 33.33%
    /*^{animation "loading5" (timeDiv 6)}*/
}
.loader :nth-child(10) {
    width: 33.33%
    margin-left: 66.66%
    /*^{animation "loading5" (timeDiv 7)} */
}