Design animated progress bars with gradients, stripes, labels, and responsive width using pure CSS.
This generator emits the CSS and the two-line markup for a progress bar: you enter a percentage, pick a fill color or gradient, choose stripes, animation, and label placement, and it returns ready-to-paste styles. The bar is two nested blocks - a rounded track with overflow hidden and a fill whose width is your percentage - so it scales with whatever container holds it. The most common surprise: the striped 'barber pole' effect animates background-position by exactly one stripe tile per loop, so editing the tile size without editing the keyframes makes the loop visibly jump.
A concrete input and expected output from the current implementation.
Input
Value: 60%. Track: 300 x 20 px, radius 10 px, color #e5e5ea. Fill: gradient #4facfe to #00f2fe. Stripes: white 45 degrees at 25% opacity. Animation: 1 s stripe loop. Label: caption '3 of 5 files' above the bar.
Expected output
<div class="progress-label">3 of 5 files</div>
<div class="progress"><div class="progress-fill"></div></div>
.progress {
width: 300px; height: 20px;
background: #e5e5ea;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
width: 60%; height: 100%;
background-image:
linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%,
transparent 50%, rgba(255,255,255,.25) 50%,
rgba(255,255,255,.25) 75%, transparent 75%, transparent),
linear-gradient(90deg, #4facfe, #00f2fe);
background-size: 16px 16px, 100% 100%;
animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
from { background-position: 16px 0, 0 0; }
to { background-position: 0 0, 0 0; }
}
.progress-label { margin-bottom: 4px; font: 13px system-ui, sans-serif; } 60% of the 300 px track is 180 px, so the fill paints exactly 180 px wide. The keyframes shift the stripe layer by 16 px, one full tile width, so the pattern ends each loop where it started and never visibly jumps.
The bar is a track element with overflow hidden and rounded corners, wrapping a fill whose width is the percentage you entered. The percentage resolves against the track's content box, so 60% on a 300 px track paints 180 px, and a 100%-wide track stretches the same bar across any container. The generator emits no padding on the track, because padding would shrink the box the percentage measures.
The fill stacks two background layers: the color gradient underneath, and a 45-degree stripe pattern on top, built from a linear-gradient tiled with background-size. The keyframes move the stripe layer's background-position by exactly one tile width per second, so every loop ends where it began. The stripe keyframes run independently of any width transition, so a bar can grow and shimmer at the same time.
Yes, if you add a transition to the fill (for example width .6s ease) and set the target width after the first render. When the starting 0 and the target are applied in the same style pass, browsers can skip the transition entirely, so force a reflow between the two steps, or use a one-shot keyframe animation from 0 to the target width.
Not for the styling: gradients, stripes, the label, and the stripe animation are all pure CSS. You need a script only when the bar must reflect real progress, because the generator has no data source - update the fill's width from your code. For an indeterminate bar with no known value, replace the fixed width with keyframes that loop the fill between 0 and 100%.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.