CSS Progress Bar Generator

Design a custom CSS progress bar with a live preview. Adjust the progress, colours, size and style, then copy the ready-to-use HTML and CSS.

Progress (%)

Value

Height (px)

Corner radius (px)

Bar colour

Track colour

Style Striped Animated stripes Show label

Live preview

45%

Generated HTML and CSS

How to Use

Set the progress percentage with the slider or the number field.
Adjust the height, bar colour, track colour and corner radius.
Toggle stripes, animated stripes and the percentage label.
Press Copy and paste the generated HTML and CSS into your site.

Key Features

Live preview — see every change instantly as you adjust the controls.
Striped and animated styles — classic progress bar effects with pure CSS.
Self-contained code — HTML plus CSS, ready to paste into any page.
100% private — runs entirely in your browser; nothing is sent or stored.

FAQs

How do I use the generated code?

Paste the HTML where you want the bar to appear, and put the style block in your page head or stylesheet. You can rename the tfh- classes to suit your project.

Can I animate the stripes?

Yes — tick both Striped and Animated stripes. The animation uses a CSS keyframes rule that is included in the output automatically.

Is the progress bar responsive?

Yes. The track is 100% wide, so the bar fills whatever container you place it in.

Is my data sent anywhere?

No. Everything runs entirely in your browser and never transmits or saves your entries.

Related Tools

Try these related tools: CSS Button Generator, CSS Loader Generator and CSS Badge Generator.