CSS Progress Bar Generator

How to use

1. 1Pick a progress bar style. Each style has a tooltip and sensible defaults; clicking a style applies that family to the current settings.
2. 2Set the progress value with the slider (or type into the number box) for any style except Indeterminate. Adjust the width, height, and corner radius to match your design; set radius to the maximum for a full pill shape.
3. 3Pick the track color and fill color. For Gradient and Indeterminate styles, set a gradient end color and angle. For Striped and Animated, pick a stripe color and stripe width.
4. 4Optionally turn on Segmented to split the bar into N equal blocks with a gap, then pick a label position (none, inside the bar, above, or to the right) and a label color.
5. 5Switch the preview background between Dark, Light, and Checker to confirm the bar looks right on every page kind. The preview always uses the exact CSS the copy buttons return.
6. 6Pick the CSS tab for the rule plus any @keyframes, the HTML tab for the markup, HTML + CSS for a paste-ready block, or Tailwind for arbitrary-value class strings. Click Copy to put it on your clipboard.

About this tool

CSS Progress Bar Generator builds a pure-CSS progress bar (HTML markup plus a self-contained CSS block, including @keyframes when the style needs animation) and renders it live using the exact CSS the tool will copy, so what you see is what you paste. Five progress bar families are included: Solid (a filled bar over a track, where the fill width matches the percent and animates smoothly when the value changes), Gradient (a solid track with a two-stop linear gradient fill at any angle for branded progress indicators), Striped (a solid fill with the Bootstrap-style 45-degree barber-pole stripes drawn by a repeating linear-gradient), Animated (striped, with the stripes scrolling under the fill on a background-position keyframe loop for upload and install states), and Indeterminate (no value, a soft shuttle slides across the track on a left-position animation for the Material-style waiting indicator used when an operation has no known duration). Every style supports an optional Segmented variant that splits the track into a chosen number of equal blocks with a gap between them, perfect for multi-step flows like onboarding, checkout, or sign-up wizards. The generator exposes the controls people actually search for: a progress value slider from 0 to 100, width and height sliders for the track size, a corner-radius slider with a pill (full radius) mode for the chip look that modern dashboards use, a track color picker, a fill color picker (or gradient start), a gradient end color and angle for the gradient and indeterminate styles, a stripe color and stripe-width slider for the striped and animated styles, an animation duration slider for the animated and indeterminate styles, segment count and segment gap when segmented mode is on, a label position picker (none, inside the bar with auto-contrasting text, above the bar, or to the right) with its own label color, and a CSS class name field so the copy output uses the selector you actually want in your project. Output is shown in four tabs: CSS only (the rule block plus any @keyframes), HTML only (the markup with role="progressbar" and the correct aria-valuenow, aria-valuemin, and aria-valuemax for screen-reader accessibility), HTML + CSS (a single block ready to paste into a sandbox or CodePen), and Tailwind (arbitrary-value class strings that work on Tailwind v3 and v4 without any custom theme entries). The preview surface switches between dark, light, and a transparent-checker background so you can confirm the bar reads well on every page kind you might ship it to. Settings, colors, and class names stay in your browser; nothing you tune is uploaded. Useful for file upload indicators, install and download progress, multi-step form wizards, onboarding flows, quiz progress, video buffering bars, page-load indicators, checkout step indicators, and any place a UI needs a polished pure-CSS progress component without dragging in a charting library.

Free to use. Works in your browser. No signup, no login.