CSS Progress Bar Generator
Generate CSS progress bars with animated fills, stripes, gradients, labels, and multiple preset styles.
What is a CSS Progress Bar?
A CSS progress bar is a visual element that communicates how much of a task or process is complete. Instead of building one from scratch, this generator assembles ready-to-use CSS for a track and a fill that you can drop into any project. It gives users an immediate sense of progress without relying on images or JavaScript libraries.
A progress bar is made of two layers: the track, which is the full-width background, and the fill, which is the coloured portion that represents the current value. The generated CSS gives the track a fixed height with hidden overflow, while the fill has its width set to the chosen percentage so it grows from left to right.
The generator outputs two selectors, .progress-bar for the track and .progress-bar .fill for the bar itself, together with any @keyframes needed for the animation you choose. Because the result is plain CSS, it works alongside Tailwind, Bootstrap, or a hand-written stylesheet, and it can be themed with a single color swap.
Use the sliders, colour pickers, and toggles to shape the look, and the preview updates live as you change settings. Nothing is uploaded or saved: the CSS is assembled entirely in your browser, so you can iterate freely and copy the final code the moment it looks right.
Key Concepts
- Progress percentage — the value from 0 to 100 that sets how far the fill extends across the track.
- Track and fill — the two required layers; the track is the container and the fill is the coloured progress.
- Animation types — None, Fill (grow from the left), Stripe Move, and Gradient Flow.
- Stripe pattern — diagonal stripes drawn with a repeating linear gradient, with an optional continuous scroll.
- Height and border radius — the two pixel dimensions that control the bar thickness and roundness.
- Presets — ready-made combinations such as success, danger, warning, info, gradient, striped, and thin.
How to Use
- Start from a preset — Pick one of the built-in presets from the dropdown, or leave it blank to begin from the default values.
- Set the progress value — Drag the Progress slider between 0 and 100 to control how much of the track the fill covers.
- Adjust the size and shape — Use the Height and Border Radius sliders to set the bar thickness and roundness.
- Choose colors and animation — Pick the bar, track, and gradient-end colors, then select an animation and its speed.
- Copy the generated CSS — Click Copy CSS to copy the
.progress-barrules and any@keyframesinto your stylesheet.
Progress Bar Reference
| Setting | Range / Options | Default |
|---|---|---|
| Progress | 0 – 100% | 65% |
| Height | 6 – 60 px | 24 px |
| Border Radius | 0 – 30 px | 12 px |
| Animation | None, Fill, Stripe Move, Gradient Flow | None |
| Animation Speed | 0.5 – 5 s | 2 s |
| Bar Color | Any hex color | #3b82f6 |
| Track Color | Any hex color | #e5e7eb |
| Gradient End | Any hex color | #8b5cf6 |
| Show Label | On / Off | On |
| Striped | On / Off | Off |
| Animate Stripes | On / Off | Off |
The built-in presets set several of these values at once:
| Preset | Progress | Animation | Colors |
|---|---|---|---|
| Default | 65% | None | #3b82f6 / #e5e7eb / #8b5cf6 |
| Success | 85% | Fill | #22c55e / #16a34a |
| Danger | 45% | — | #ef4444 / #dc2626 |
| Warning | 60% | — | #f59e0b / #d97706 |
| Info | 70% | — | #06b6d4 / #0891b2 |
| Gradient Flow | 75% | Gradient | #3b82f6 / #ec4899 |
| Striped | 55% | Stripe | #8b5cf6 / #7c3aed |
| Thin Minimal | 42% | None | label off, height 8, radius 4 |
Worked Examples
- Default bar — 65% progress, 24px height, 12px radius, blue fill
#3b82f6on a light gray track#e5e7eb, no animation. - Success bar — the success preset fills 85% with a fill animation at 1.5s, moving toward green
#22c55eand#16a34a. - Gradient flow — the gradient preset sets 75%, height 28px, radius 14px, and a 3-second gradient animation from
#3b82f6to#ec4899. - Striped bar — the striped preset shows 55% with a stripe animation at 1s, using
#8b5cf6toward#7c3aedwith stripes enabled. - Thin minimal — the thin preset uses 42% progress, height 8px, radius 4px, and turns the label off for a subtle indicator.
- Warning bar — the warning preset shows 60% with amber
#f59e0band a darker#d97706gradient end.
Tips and Common Mistakes
- Keep the radius at or below half the height — a radius larger than half the bar height can look clipped, so with a 24px bar, 12px is the clean maximum.
- Match the track to the surface — on a coloured page, a track that matches the surrounding background keeps the bar looking flat and intentional.
- Do not over-combine effects — stripes, a moving gradient, and a fill animation all at once compete for attention; choose a single animation style.
- Check label contrast — if the label sits over the fill, make sure its color stays readable against the bar color at every progress value.
- Copy the keyframes too — fill, stripe, and gradient animations depend on
@keyframes; copying only the selector rules leaves the bar static. - Choose the speed carefully — 2 seconds feels calm while 0.5 seconds is very fast; match the tempo to the context.
Common Use Cases
Progress bars appear wherever a user needs to know how far along something is. A few common places this generator helps are listed below.
- File uploads — show how much of a file has been transferred before the transfer completes.
- Form completion — indicate how many steps of a multi-part form have been finished.
- Loading states — give users feedback while data or assets are still loading.
- Skill or level meters — display a score against a maximum in games and dashboards.
- Quiz and survey results — visualise the share of correct or completed answers.
- Storage and quota usage — show how much of an allowance has been consumed.
Frequently Asked Questions
Can I use a gradient fill for the bar?
Yes. Set the bar color as the gradient start and the gradient end color as the second stop. The tool generates a linear-gradient background. For animated gradient flow, select the "Gradient Flow" animation type.
How do stripes work?
Stripes use a repeating linear gradient on the bar fill. Check "Striped" to enable them, and "Animate Stripes" to make them scroll continuously using background-position animation.
What CSS classes does the tool output?
It outputs a .progress-bar rule for the track and a .progress-bar .fill rule for the bar, plus any @keyframes needed by the selected animation.
How do I show or hide the percentage label?
Use the Show Label toggle. When it is on, the current progress value is shown with the bar; when off, only the colored bar is rendered.
Which animation types are available?
Four: None for a static bar, Fill to grow the bar from the left, Stripe Move to scroll diagonal stripes, and Gradient Flow to animate a moving gradient.
How do I change the animation speed?
Drag the Animation Speed slider between 0.5 and 5 seconds. That value becomes the animation-duration in the generated CSS.
Does the generated CSS need a framework?
No. It is standard CSS and works in any modern browser. It can be combined with Tailwind, Bootstrap, or plain stylesheets.
Is anything sent to a server?
No. The CSS is generated entirely in your browser, so your settings never leave your device.