.loader {
    width: 40px;
    height: 20px;
    background: orange;
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: l9-0 1.5s infinite linear;
    z-index: 99999999; 
}
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 1;
    transition: opacity 1s ease; 
}

    .loader:before,
    .loader:after {
        content: "";
        position: absolute;
        background: inherit;
        bottom: 100%;
        width: 50%;
        height: 100%;
        animation: inherit;
        animation-name: l9-1;
    }

    .loader:before {
        left: 0;
        transform-origin: bottom left;
        --s: -1;
    }

    .loader:after {
        right: 0;
        transform-origin: bottom right;
    }

@keyframes l9-0 {
    0%,10% {
        transform: translateY(0%) scaleY(1);
    }

    49.99% {
        transform: translateY(-50%) scaleY(1);
    }

    50% {
        transform: translateY(-50%) scaleY(-1);
    }

    90%,100% {
        transform: translateY(-100%) scaleY(-1);
    }
}

@keyframes l9-1 {
    10%,90% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(calc(var(--s,1)*180deg));
    }
}