Striped Progress Bar
A rounded bar with diagonal stripes that scroll forward while the fill creeps up in uneven steps, like a real install. The fill is revealed with clip-path, so the stripes never stretch.
Also known as: barber pole progress bar, bootstrap striped progress bar, candy stripe loading bar.
HTML
<div class="ldr-striped-progress-bar" role="progressbar" aria-label="Loading"><span></span></div>
CSS
.ldr-striped-progress-bar {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
box-sizing: border-box;
width: calc(var(--s) * 6);
height: calc(var(--s) / 3.5);
padding: calc(var(--s) / 28);
border-radius: var(--s);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 15%, transparent);
}
.ldr-striped-progress-bar span {
display: block;
height: 100%;
border-radius: var(--s);
background-color: var(--c);
background-image: linear-gradient(135deg, rgb(255 255 255 / 0.3) 25%, transparent 25% 50%, rgb(255 255 255 / 0.3) 50% 75%, transparent 75%);
background-size: calc(var(--s) / 2.5) calc(var(--s) / 2.5);
animation:
ldr-striped-progress-bar-scroll 0.7s linear infinite,
ldr-striped-progress-bar-fill 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-striped-progress-bar-scroll {
to { background-position: calc(var(--s) / 2.5) 0; }
}
@keyframes ldr-striped-progress-bar-fill {
0% { clip-path: inset(0 100% 0 0 round var(--s)); }
18% { clip-path: inset(0 74% 0 0 round var(--s)); }
30% { clip-path: inset(0 66% 0 0 round var(--s)); }
50% { clip-path: inset(0 34% 0 0 round var(--s)); }
62% { clip-path: inset(0 26% 0 0 round var(--s)); }
80%, 90% { clip-path: inset(0 0 0 0 round var(--s)); opacity: 1; }
100% { clip-path: inset(0 0 0 0 round var(--s)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-striped-progress-bar, .ldr-striped-progress-bar *, .ldr-striped-progress-bar::before, .ldr-striped-progress-bar::after, .ldr-striped-progress-bar *::before, .ldr-striped-progress-bar *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.