Progress Bar Creator

The short version

A progress bar is two nested divs and a width percentage. That’s it. This generator gives you sliders and color pickers for the parts you’d otherwise tweak by hand, renders the bar live as you drag, and hands you the HTML and CSS to paste. No framework, no images, no JavaScript needed to make it move.

Set the fill to 65%, bump the height, round the corners, pick your colors. Flip on stripes if you want the classic “loading” texture, then animate them so they scroll. The code block updates the moment you change anything.

What each control does

The sliders map straight to CSS properties, so there are no surprises in the output:

• Value sets the width of the inner .progress-bar from 0 to 100 percent. That’s the fill level.
• Height controls how thick the bar is, in pixels. Skinny 6px bars for subtle indicators, chunky 40px bars when the number matters.
• Border radius rounds the track and fill together. Crank it to half the height and you get the fully pill-shaped look.
• Track and Fill are plain color pickers. Track is the empty background, fill is the colored portion. Paste a hex or eyedrop a shade.

Three toggles handle the extras. Show label centers the percentage as white text inside the fill. Striped layers a repeating-linear-gradient over the fill for that diagonal candy-stripe pattern. Animated only unlocks once stripes are on, because it scrolls those stripes sideways with a @keyframes rule.

Under the hood

The markup is deliberately boring:

<div class="progress">
  <div class="progress-bar">65%</div>
</div>

The outer .progress is the track with overflow: hidden so the fill’s corners stay clipped. The inner .progress-bar gets the width and color. When you turn on stripes, the generator adds a background-image of repeating transparent-and-white bands at 45 degrees on top of the solid fill color. The animation just slides background-position by one stripe width on a loop, so the texture appears to march.

The label uses flexbox to center the text, which is why short bars hide the number gracefully instead of clipping it awkwardly. And a transition: width 0.3s ease is baked in, so if you later update the width from JavaScript, the bar slides to the new value instead of jumping.

Wiring up the value from your code

The generated bar is static at whatever percentage you set. To make it reflect real progress, change the width in your own script:

document.querySelector('.progress-bar').style.width = percent + '%';

Set that on an upload’s progress event, a fetch you’re polling, or a step counter in a multi-page form. Because the transition is already in the CSS, each update animates smoothly. If you’re showing the label too, update its text content in the same line.

When you’d reach for this

File uploads and downloads are the obvious one. Onboarding flows that say “step 2 of 5.” Quiz and survey completion. Skill bars on a portfolio. Anywhere a number between zero and a hundred deserves a visual. The striped-and-animated variant reads as “actively working,” which suits indeterminate-feeling waits, while a plain solid bar is cleaner for known, finite progress.

FAQ

Does this need any JavaScript to display?

Nope. The bar, the stripes, and the animation are pure CSS. You only need a line of JavaScript if you want the fill to change dynamically while the page is live.

Why is the Animated toggle greyed out?

Animation rides on the stripes, so it stays disabled until you switch Striped on. Turn on stripes first and Animated becomes available.

Can I drop this into Bootstrap or Tailwind?

Sure. The classes are generic (.progress and .progress-bar), so rename them if they clash with your framework. The CSS stands on its own and doesn’t depend on any library.

How do I show a real percentage from an upload?

Listen to the upload’s progress event and set .progress-bar’s style.width to the current percent. The built-in width transition handles the smooth movement for you.

Will the stripe animation eat battery or CPU?

It’s a single background-position keyframe, which browsers handle cheaply. For users who prefer less motion, wrap the animation in a prefers-reduced-motion media query and skip it.

Is anything uploaded when I use this?

No. The generator is client-side JavaScript. Your color choices and settings never leave the page, and the code is assembled on your own machine before you copy it.