Progress Bar Generator — Easy Guide

What it does

• Create four styles: Basic, Striped (moving), Gradient, and Circular.
• Change the percentage, colors, bar thickness, and corner roundness.
• See a live preview, then click Copy Code to paste on your page.

Make a progress bar (step by step)

1. Choose a Style — Basic, Striped, Gradient, or Circular.
2. Set the Percentage — move the slider to the number you want.
3. Pick Colors — click the color box or paste a code like #F1A54D.
4. Show Percentage — turn the switch on/off to show the number.
5. Bar Thickness — makes the bar taller (or the circle ring thicker).
6. Corner Radius — 0 = square, 20 = fully rounded (pill shape).
7. Copy Your Bar — click Copy Code. You’re ready to paste.

Add it to a Systeme.io page

1. Open your page in the editor.
2. Drag in an HTML block where you want the bar.
3. Click the block and paste what you copied.
4. Save and preview.

Customize later (easy)

• Want new colors? Open the generator, change them, copy again, and paste over the old one.
• Want the stripes slower/faster? Use the generator’s speed option, copy again, and replace.
• Want the bar more rounded? Move Corner Radius toward 20 and copy again.

Common questions

The moving stripes look jumpy.
Use the Striped style from this generator—it’s already tuned to loop smoothly. If you still want calmer motion, choose a slower speed and copy again.

The number is hard to read.
Change the Text Color so it stands out from the bar color.

It’s too tall or too thin.
Adjust Bar Thickness until it looks right, then copy and paste again.

Can I have several bars on one page?
Yes. Make each one, click Copy Code, and paste them where you want.

• Keep the number visible if you want the progress to be crystal clear.
• Pick colors with good contrast so the number is easy to read.
• If your page adds extra spacing or borders, place the bar inside a section and adjust that section.