What shapes can I generate?

Four: a linear horizontal track, a circular SVG ring driven by stroke-dasharray, a stepped row of equal segments, and a semicircle gauge that uses the top half of a ring. Each shape produces appropriate markup and CSS, and the live preview renders the real thing so you can compare them before exporting.

What is the difference between determinate and indeterminate?

A determinate bar shows a known percentage and exposes it via aria-valuenow. An indeterminate bar represents an unknown-duration busy state — the fill loops with a keyframe animation, and aria-valuenow is deliberately omitted so assistive technology announces a busy state rather than a misleading number. Turn on the Indeterminate toggle to switch modes.

Is the generated markup accessible?

Yes. Every bar carries role="progressbar" with aria-valuemin and aria-valuemax. When the value is known it also sets aria-valuenow; when indeterminate it omits aria-valuenow and adds an aria-label instead. A prefers-reduced-motion media query disables the transitions and animations for users who request reduced motion.

What fill styles are available?

Solid, gradient (a two-stop linear gradient between the fill and gradient-to colors), striped (diagonal CSS stripes), animated stripes (the stripes scroll via a keyframe), and pulse (the fill gently fades in and out). For the circular and semicircle shapes, the gradient is emitted as an SVG linearGradient applied to the ring stroke.

What output formats can I export?

A self-contained HTML + CSS snippet that works the moment you paste it, standalone CSS (with the markup as a leading comment), a React component named ProgressBar that takes a value prop and drives the fill or stroke-dashoffset from it, and Tailwind-class markup. Switch formats from the Output dropdown and the code regenerates immediately.

How does the circular ring compute its arc?

It draws two SVG circles — a track and a foreground ring. The ring length comes from the circle circumference (2*pi*r, where r is half the diameter minus the stroke width) set as stroke-dasharray, and the visible portion is controlled by stroke-dashoffset computed from the value. The semicircle uses half that circumference as its arc and rotates the ring so it fills along the top.

Progress Bar Generator

Design linear, circular, stepped, or semicircle progress bars — determinate or indeterminate — with gradients, stripes, labels, and a live animated preview. Export self-contained HTML+CSS, CSS, a React component, or Tailwind markup with correct ARIA.

About this ToolHow it works, benefits & use cases

Design a progress bar visually and walk away with production-ready code. Pick one of four shapes — a linear track, a circular SVG ring, a stepped segment row, or a semicircle gauge — and switch between determinate (a known percentage) and indeterminate (a looping busy animation). A sticky live preview renders the real bar, not a mockup: drag the value slider to move the fill, hit the Animate button to sweep it from zero to the target, and toggle indeterminate to watch the loop. Style the fill as a solid colour, a two-stop gradient, static or animated stripes, or a soft pulse; set the track and gradient colours; and tune height, corner radius, ring size and stroke, step count, and transition timing. The markup ships with correct ARIA — role="progressbar" plus aria-valuemin/max, and aria-valuenow only when the value is known — and a prefers-reduced-motion guard that disables animation for users who request it. Export a self-contained HTML + CSS snippet, standalone CSS, a React component with a value prop, or Tailwind-class markup.

How to Use

1Choose a shape: Linear, Circular, Stepped, or Semicircle.
2Set the value with the slider, or turn on Indeterminate for a looping busy state.
3Pick a fill style — solid, gradient, striped, animated stripes, or pulse — and set the fill, gradient, and track colors.
4Tune the dimensions: height and radius for linear, size and stroke for circular, step count for stepped, plus transition timing.
5Toggle the percentage label (inside, outside, or centered) and the load animation, then press Animate to preview the 0 to value sweep.
6Pick an output format — HTML + CSS, CSS, React, or Tailwind — then copy, download, or share it.

Key Benefits

Four shapes from one model: linear, circular SVG ring, stepped segments, and semicircle gauge
Determinate and indeterminate modes with a true looping animation for busy states
Five fill styles — solid, gradient, striped, animated stripes, and pulse — all pure CSS
Live preview with a value slider and an animate button that sweeps the fill from zero
Correct ARIA baked in, with aria-valuenow omitted automatically when indeterminate
A prefers-reduced-motion guard so animation respects user motion preferences
Export to self-contained HTML + CSS, CSS, a React component with a value prop, or Tailwind markup

Common Use Cases

Adding an upload or form-completion bar that matches your brand colors
Building a circular percentage ring for a dashboard KPI or score
Creating a stepped indicator for a multi-step checkout or onboarding flow
Dropping an indeterminate slim bar at the top of a page during async loads
Generating an accessible React ProgressBar component for a design system

65%

Value65%

Presets

Shape & style

Indeterminate (looping animation, no fixed value)

Fill style

Fill

Gradient to

Track

Dimensions

Height16px

Radius999px

Transition600ms

Label & animation

Show percentage label

Label position

Animate on load (transition fill into place)

Output format

HTML + CSS output

Copy, download, share, or pipe to another tool

<style>
.progress-track {
  position: relative;
  width: 100%;
  height: 16px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  position: relative;
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
  border-radius: 999px;
  transition: width 600ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill, .progress-ring, .progress-track { animation: none !important; transition: none !important; }
}
</style>

<div class="progress">
  <div class="progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
    <div class="progress-fill"></div>
  </div>
  <span class="progress-value">65%</span>
</div>

Accessibility notes

The bar uses role="progressbar" with aria-valuemin and aria-valuemax.
aria-valuenow is set to 65 and should be updated as progress changes.
Animations are disabled automatically under prefers-reduced-motion.

Determinate or indeterminate, four shapes

Every bar emits correct ARIA — role="progressbar" with aria-valuemin/max, and aria-valuenow when the value is known (omitted for indeterminate). Gradient, striped, animated-stripe and pulse fills are pure CSS, and a prefers-reduced-motion guard disables animation for users who ask for it. Export a self-contained HTML+CSS snippet, standalone CSS, a React component with a value prop, or Tailwind markup.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Progress Bar Generator

How to Use

Key Benefits

Common Use Cases

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Progress Bar Generator