/* Derived from code by Temani Afif via https://css-loaders.com/factory/ */

/* HTML: <div class="loader"></div> */
.loader {
    --block-w: 12px;
    --block-h: 10px;
    --block-sp: 2px;
    --slab-w5: calc(5 * var(--block-w));
    --slab-w7: calc(7 * var(--block-w));
    width: calc(18 * var(--block-w));
    height: var(--block-h);
    box-shadow: 0 6px 0 #000;
    position: relative;
    clip-path: inset(-200px 0 -5px)
}

.loader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - var(--slab-w5)) 0;
    height: calc(7 * var(--block-h));

    /* black slab with vertical white stripes (i.e. spacing) */
    --stripe-end: calc(var(--block-w) - var(--block-sp));
    --g: no-repeat repeating-linear-gradient(90deg, #000 0px, #000 var(--stripe-end), #fff var(--stripe-end), #fff var(--block-w));

    /* define 3 background layers, each containing a slab */
    background: var(--g), var(--g), var(--g);

    /* size of layer (ie rectangle), following the 5-7-5 ratio */
    background-size: var(--slab-w5) var(--block-h), var(--slab-w7) var(--block-h), var(--slab-w5) var(--block-h);

    /* define some vars to make animation code simpler */
    --block-h-sp1: calc(var(--block-h) + 2 * var(--block-sp));
    --block-h-sp2: calc(2 * var(--block-h-sp1));
    --offscreen-y: calc(0px - var(--block-h));

    animation:
        l7-1 1s infinite linear,
        l7-2 1s infinite linear;
}

/* dropping */
@keyframes l7-1 {
    0%,
    100% {
        background-position: 
            0 var(--offscreen-y),
            0 var(--offscreen-y),
            0 var(--offscreen-y)
    }

    18% {
        background-position:
            0 100%,
            0 var(--offscreen-y),
            0 var(--offscreen-y)
    }

    36% {
        background-position: 
            0 100%,
            0 calc(100% - var(--block-h-sp1)),
            0 var(--offscreen-y)
    }

    54%,
    72%,
    98% {
        background-position: 
            0 100%,
            0 calc(100% - var(--block-h-sp1)),
            0 calc(100% - var(--block-h-sp2))
    }
}

/* sliding */
@keyframes l7-2 {
    0%,
    70% {
        transform: translate(0)
    }

    100% {
        transform: translate(200%)
    }
}