Should I set the width with CSS or update it with JavaScript?

The generated .fill width is a fixed percentage for previewing a design. In a real app, update the .fill element's width (or a CSS custom property it reads) from JavaScript as the underlying task progresses — the transition: width rule already makes that change animate smoothly.

What's the difference between striped and animated?

Striped adds a repeating diagonal-stripe background pattern to the fill for texture. Animated adds a @keyframes rule that scrolls that stripe pattern continuously, which reads as ongoing activity — useful for an indeterminate or long-running task, not just a static percentage.

Is a CSS progress bar accessible to screen reader users?

Add role="progressbar" plus aria-valuenow, aria-valuemin="0", and aria-valuemax="100" on the outer .progress element (updating aria-valuenow as the value changes) so assistive tech can announce the current progress — the CSS alone carries no such semantics.

Can I use the native element instead?

You can, and it's more accessible by default, but styling it consistently across browsers is limited and clunky (different pseudo-elements per browser). A styled div-based bar like this one gives full control over appearance at the cost of adding the ARIA attributes yourself.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS PROGRESS BAR GENERATOR

Dial in progress, colors, and optional stripes, then copy the generated CSS.

Progress: 65%

Height: 16px

Border radius: pill

Track color

Fill color

StripedAnimated stripes

CSS

.progress {
  width: 100%;
  height: 16px;
  background: #4a4238;
  border-radius: 999px;
  overflow: hidden;
}

.progress .fill {
  height: 100%;
  width: 65%;
  background: #ff6a35;
  border-radius: 999px;
  transition: width 0.3s ease;
}

How to build a CSS progress bar

1
Drag the progress slider to preview any fill percentage.
2
Adjust the height, border radius, and track/fill colors.
3
Turn on striped fill and, optionally, an animated stripe scroll.
4
Copy the generated .progress / .fill CSS and paste it into your stylesheet.

Questions

Should I set the width with CSS or update it with JavaScript?: The generated .fill width is a fixed percentage for previewing a design. In a real app, update the .fill element's width (or a CSS custom property it reads) from JavaScript as the underlying task progresses — the transition: width rule already makes that change animate smoothly.
What's the difference between striped and animated?: Striped adds a repeating diagonal-stripe background pattern to the fill for texture. Animated adds a @keyframes rule that scrolls that stripe pattern continuously, which reads as ongoing activity — useful for an indeterminate or long-running task, not just a static percentage.
Is a CSS progress bar accessible to screen reader users?: Add role="progressbar" plus aria-valuenow, aria-valuemin="0", and aria-valuemax="100" on the outer .progress element (updating aria-valuenow as the value changes) so assistive tech can announce the current progress — the CSS alone carries no such semantics.
Can I use the native <progress> element instead?: You can, and it's more accessible by default, but styling it consistently across browsers is limited and clunky (different pseudo-elements per browser). A styled div-based bar like this one gives full control over appearance at the cost of adding the ARIA attributes yourself.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.