.ball-loader {
    position: relative;
    height: 50vh;
    text-align: center;
}

.ball-loader-l {
    transform: scale(1.5);
}

.ball-loader-s {
    transform: scale(0.5);
}

.ball-loader-xs {
    transform: scale(0.3);
}

.ball-loader-xxs {
    transform: scale(0.15);
}

.ball-loader .ball {
    position: absolute;
    top: 120px;
    width: 100px;
    height: 100px;

    transform: rotate(0turn);

    animation: ball-loader-motion-path 6s infinite linear;
    offset-path: path(
            "M40,-60 C-60,-60 -60,40 40,40 C140,40 140,140 40,140 C-60,140 -60,40, 40,40 C140,40 140, -60 40,-60"
    );
}

.ball-loader .ball-2 {
    animation-delay: -2s;
}

.ball-loader .ball-3 {
    animation-delay: -4s;
}

@keyframes ball-loader-motion-path {
    100% {
        offset-distance: 100%;
    }
}