Stripe Loading
Diagonal candy-stripes shimmer continuously inside the filled portion — instantly reads as "actively in progress." A premium touch lifted from server-software install dialogs and CI build runners.
Stripe Loading the 5th of 12 designs in the 12 CSS Progress Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div
class="pb-stripe"
role="progressbar"
aria-valuenow="62"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Build progress"
>
<div class="pb-stripe-head">
<span>Build #482</span>
<span class="pb-stripe-pct">62%</span>
</div>
<div class="pb-stripe-rail">
<div class="pb-stripe-fill" style="--pb-stripe-w: 62%"></div>
</div>
<div class="pb-stripe-foot">Compiling assets · 4.2 MB / 6.8 MB</div>
</div> .pb-stripe {
width: 240px;
display: grid;
gap: 6px;
font-family: system-ui, sans-serif;
}
.pb-stripe-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
color: #fde68a;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.04em;
}
.pb-stripe-pct {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
padding: 2px 8px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.pb-stripe-rail {
height: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(245, 158, 11, 0.18);
border-radius: 7px;
overflow: hidden;
}
.pb-stripe-fill {
width: var(--pb-stripe-w, 0%);
height: 100%;
background: repeating-linear-gradient(-45deg, #f59e0b 0, #f59e0b 8px, #fbbf24 8px, #fbbf24 16px);
background-size: 22px 22px;
animation: pbStripeMove 0.8s linear infinite;
transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pb-stripe-foot {
font-size: 11px;
color: #94a3b8;
letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
.pb-stripe-fill {
animation: none;
}
}
@keyframes pbStripeMove {
from { background-position: 0 0; }
to { background-position: 44px 0; }
}