Animated loading bar as used in Lucerne, Merlot, and Kin (Ink Codebase Browser)

loading.css

.loading {
    width: 100%;
    flex-grow: 1;
    margin: 0;
    height: 3px;
    position: relative;
    background: var(--hover-bg);
    overflow: hidden;
}

@keyframes slider {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.loading::after {
    content: '';
    display: block;
    height: 100%;
    width: 60%;
    padding-right: 40%;
    background-color: var(--primary-text);
    position: absolute;
    top: 0;
    left: 0;
    animation: slider 1s linear infinite;
}