Striped progress bar

An animated candy-stripe progress bar with adjustable value, color and speed.

progress
bar
stripes
animation
ui

Value65%

Color#6b46ff

Speed1s

HTML

<div class="progress"><div class="progress__bar"></div></div>

CSS

:root {
    --value: 65%;
    --color: #6b46ff;
    --speed: 1s;
}

.progress {
    width: 100%;
    max-width: 320px;
    height: 18px;
    border-radius: 999px;
    background: #2a2d3a;
    overflow: hidden;
}
.progress__bar {
    width: var(--value);
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--color) 0 12px,
        color-mix(in srgb, var(--color) 72%, #000) 12px 24px
    );
    background-size: 34px 34px;
    animation: stripe-move var(--speed) linear infinite;
    transition: width 0.3s ease;
}

@keyframes stripe-move {
    to { background-position: 34px 0; }
}

How it works

The fill is a repeating-linear-gradient of two shades of one color (the darker one made on the fly with color-mix), tiled with background-size. Animating background-position by exactly one tile makes the stripes appear to march — the classic “active” progress look.

--value sets the fill width (a percentage); the transition animates changes to it.
--speed controls the stripe march; --color themes the whole bar.