Progress Bar Generator
Build progress bars with height, radius, gradient or solid fill and optional stripes. Live preview, copy the CSS.
65%
.progress { width: 100%; height: 12px; background: #232836; border-radius: 999px; overflow: hidden; }
.progress-bar {
width: 65%; height: 100%;
background: linear-gradient(90deg, #7c3aed, #06b6d4);
border-radius: 999px;
transition: width .3s ease;
}About the progress bar generator
A progress bar is two elements: a track and a fill whose width represents completion. Rounding both to the same radius is what stops the fill from looking like a rectangle sitting inside a pill.
Transitioning the width means progress animates smoothly rather than jumping, which reads as more responsive even when the underlying updates are identical.
How to use it
- 1Set the value to preview a given percentage.
- 2Choose height and radius. Fully rounded suits most interfaces.
- 3Pick a solid or gradient fill and set the track colour.
- 4Add stripes for an indeterminate look.
- 5Copy the CSS.
Questions
Should I use the native progress element?
It is the accessible choice, but it is notoriously hard to style consistently across browsers. If you use divs instead, add role="progressbar" with aria-valuenow.
How do I show indeterminate progress?
Animate a striped or gradient background position on a full-width fill, so it moves without implying a specific percentage.
Why does the fill look square inside a rounded track?
The fill needs the same border-radius as the track. Set it on both.