.loader-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
}
.loader {
    --s: 25px;
    --g: 15px;

    height: calc(1.353*var(--s) + var(--g));
    aspect-ratio: 3;
    background:
        linear-gradient(green 0 0) left/33% 100% no-repeat,
        conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
            #fff 135deg, lightgray 0 270deg, #aaa 0);
    background-blend-mode: multiply;
    --_m:
        linear-gradient(to bottom right,
            #0000 calc(0.25*var(--s)), #000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)), #0000 0),
        conic-gradient(from -90deg at right var(--g) bottom var(--g), #000 90deg, #0000 0);
    -webkit-mask: var(--_m);
    mask: var(--_m);
    background-size: calc(100%/3) 100%;
    -webkit-mask-size: calc(100%/3) 100%;
    mask-size: calc(100%/3) 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: l7 steps(3) 1.5s infinite;
}

@keyframes l7 {
    to {
        background-position: 150% 0%
    }
}