Indeterminate progress bar

<div class="progress-bar">
    <div class="progress-bar__progress"></div>
</div>

.progress-bar {
    /* Color */
    background-color: #d1d5db;

    /* Rounded border */
    border-radius: 9999px;

    /* Size */
    height: 0.75rem;
}

.progress-bar__progress {
    /* Different background color */
    background-color: #3b82f6;

    /* Rounded border */
    border-radius: 9999px;
}

.progress-bar {
    position: relative;
}

.progress-bar__progress {
    /* Absolute position */
    position: absolute;
    bottom: 0;
    top: 0;

    width: 50%;
}

@keyframes indeterminate {
    from {
        left: -50%;
    }
    to {
        left: 100%;
    }
}

.progress-bar__progress {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: indeterminate;
}