Progress Bar Generator
Design a CSS progress bar and copy the HTML and CSS in one paste.
Preview
The generated snippet is plain HTML and CSS with two keyframes. No framework and no external stylesheet.
How to use it
- Set the width and height in pixels, plus the corner radius. The radius is capped at half the height so the ends stay round instead of pinched.
- Pick the fill color and the track color.
- Choose an animation: none, moving stripes, or a pulse that fades the fill in and out.
- Drag fill percentage to see the bar at any value from 0 to 100.
- Copy the snippet with Copy, or save it as an HTML file with Download.
Common use cases
- Upload and import screens - a striped fill communicates that work is still happening.
- Dashboards and quota meters - copy the same bar at two widths for storage or budget usage.
- Prototype mockups - paste real markup into a static page instead of a screenshot of a bar.
- Onboarding checklists - show completion as a bar that updates as steps are finished.
Why it stays private
The preview is a pair of divs styled by inline properties and two keyframes defined in the page. No request is made and nothing is stored, so the colors and sizes you try stay in the tab.
FAQ
Q: Does the snippet need a library or a stylesheet? A: No. It is two divs, one style block and, for the animated options, one keyframes rule you can move into your own CSS.
Q: Why is my corner radius smaller than the number I typed? A: A radius larger than half the height would distort the bar, so the value is capped at half the height.
Q: Can I show real progress with it?
A: Yes. Set the width of the .pb-fill element from your own code, and the bar updates without any other change.
Q: Is the striped animation heavy to render?
A: It animates background-position on one element, which is a cheap property for browsers to composite, and no JavaScript runs during the animation.
Your data stays on this device
Progress Bar Generator runs 100% locally. Everything you paste or drop is processed by your own browser and never transmitted. Nothing is stored on our servers — close the tab and it is gone.
Nothing you type is sent to a server, logged, or used for analytics. The page works even with your network disconnected after first load.