<div class="progressbox">
	<div style="width: 50%;" class="progressbar"></div>
</div>
.progressbox {
    border-style: none;
    border-radius: 10px;
    height: 6px;
    width: 100%;
    background-color: #ededed;
}

.progressbar {
    background-color: var(--theme, #13c2c2);
    border-radius: 100px;
    height: 6px;
    transition: all 0.8s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
}

.progressbar::before {
    height: 6px;
    border-radius: 100px;
    animation: progress 2.4s infinite cubic-bezier(0.23, 1, 0.32, 1);
    content: "";
    display: block;
}

@keyframes progress {
    from {
        width: 0%;
        background: rgba(255, 255, 255, 0.4);
    }
    to {
        width: 100%;
        background: rgba(255, 255, 255, 0.1);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.