.spinner {
    position: absolute;
    bottom: calc(30% - 0.25em);
    left: calc(50% - 1em);
    background-color: rgba(168, 200, 141, 0.2); /* primary color with opacity */
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
}
.spinner.fake-progress,
.spinner.indeterminate-progress {
    left: calc(50% - 8em);
    height: 0.5em;
    width: 16em;
}
@keyframes spinner-pulse {
    0% {
        left: 0;
        width: 100%;
        scale: 0;
    }
    100% {
        left: 0;
        width: 100%;
        scale: 1;
    }
}
@property --indeterminate-progress-a {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
@property --indeterminate-progress-b {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 1%;
}
@property --indeterminate-progress-c {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 2%;
}
@property --indeterminate-progress-d {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 4%;
}
@property --indeterminate-progress-e {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 5%;
}
@property --indeterminate-progress-f {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 6%;
}
@keyframes spinner-indeterminate-progress {
    0% {
        --indeterminate-progress-a: 0%;
        --indeterminate-progress-b: 1%;
        --indeterminate-progress-c: 2%;
        --indeterminate-progress-d: 4%;
        --indeterminate-progress-e: 5%;
        --indeterminate-progress-f: 6%;
    }
    100% {
        --indeterminate-progress-a: 6%;
        --indeterminate-progress-b: 7%;
        --indeterminate-progress-c: 8%;
        --indeterminate-progress-d: 10%;
        --indeterminate-progress-e: 11%;
        --indeterminate-progress-f: 12%;
    }
}
@keyframes spinner-fake-progress {
    0% {
        left: 0;
        width: 3%;
        scale: 0;
    }
    0.5% {
        width: 3%;
        scale: 1;
    }
    95% {
        left: 0;
        width: 100%;
    }
    99% {
        left: 97%;
        width: 3%;
        scale: 1;
    }
    100% {
        left: 97%;
        width: 3%;
        scale: 0;
    }
}
.spinner::after {
    display: block;
    content: "";
    position: relative;
    left: 48.5%;
    height: 100%;
    width: 3%;
    background: linear-gradient(45deg, #1c3c23 30%, #a8c88d 90%);
    border-radius: 0.5em;
    animation: 1s ease-out infinite alternate both spinner-pulse;
}
.spinner.indeterminate-progress::after {
    left: 2%;
    width: 96%;
    --indeterminate-progress-a: 0%;
    --indeterminate-progress-b: 1%;
    --indeterminate-progress-c: 2%;
    --indeterminate-progress-d: 4%;
    --indeterminate-progress-e: 5%;
    --indeterminate-progress-f: 6%;
    background-image: repeating-linear-gradient(
        120deg,
        #1c3c23 var(--indeterminate-progress-a) var(--indeterminate-progress-b),
        #a8c88d var(--indeterminate-progress-c) var(--indeterminate-progress-d),
        #1c3c23 var(--indeterminate-progress-e) var(--indeterminate-progress-f)
    );
    animation: 0.5s linear infinite spinner-indeterminate-progress;
}
.spinner.fake-progress::after {
    animation: 120s cubic-bezier(0, 1, 1, 1) infinite both spinner-fake-progress;
}