Developer Tools New Tool

Free Online CSS Progress Bar Generator for progress and div Bars

Style a progress bar two ways: the real progress element, with the WebKit and Moz pseudo-elements it needs, or a div based bar. Set the height, radius, track colour, a solid or gradient fill, animated stripes, a transition on the value, an indeterminate state and a label inside or beside.

Free Forever Nothing Uploaded Native and div bars Runs in your browser

Free Online CSS Progress Bar Generator for progress and div Bars

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Progress Bar Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

The native progress element

62%

The div based bar

Both bars are real and both carry the generated CSS. Drag the value slider below to move them.

CSS

Value and shape Value 62% Height px Radius pill Indeterminate

Colours Track Fill

Stripes and motion Animated stripes Stripe width px Stripe cycle ms Value transition ms

Label and naming Label Class name

A div bar needs role="progressbar" and aria-valuenow, which the output includes in the markup comment.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Style a Progress Bar with CSS

A few steps, and nothing is uploaded.

Set the value and shape Drag the value to see the transition, then set the height and the radius. The radius slider ends at a pill shape, which is what most bars use, and both preview bars follow every change at once.

Choose the colours A track colour and either a solid fill or a two colour gradient with an angle. The gradient is applied to the fill only, not to the track, so a partly complete bar shows the part of the gradient it has reached.

Add stripes or an indeterminate state Stripes are a repeating linear gradient with a background position animation, so they cost nothing to download. Indeterminate shows motion without a value, for when you genuinely do not know how far along the job is.

Copy the set you need The output holds both rule sets, the native progress rules with their WebKit and Moz pseudo-elements and the div bar rules, and the expected HTML for both as a comment. Delete the half you are not using.

What to Know About Styling Progress Bars

Including the vendor pseudo-elements and the ARIA a div bar needs.

A styled progress element needs appearance: none plus two different vendor pseudo-element sets. The element has an internal structure the browser draws, and CSS cannot reach it through ordinary selectors. WebKit and Blink expose ::-webkit-progress-bar for the track and ::-webkit-progress-value for the fill, and only after appearance: none has switched off the native rendering. Firefox exposes ::-moz-progress-bar for the fill and takes the track colour from the element itself. This is one of the very few places where a vendor prefix is still genuinely required rather than a leftover from years ago, because no unprefixed standard for these internals has shipped. Each set has to be written as its own rule, since an engine that does not recognise a selector in a list discards the whole rule.

A div bar needs role="progressbar" with aria-valuenow to mean anything. To a screen reader a pair of nested divs is two empty boxes: the width of the inner one carries no meaning at all. The wrapper needs role="progressbar", aria-valuemin, aria-valuemax and an aria-valuenow that your code updates every time the width changes, plus an accessible name from aria-label or a real label. If the value is genuinely unknown, leave aria-valuenow off rather than setting it to zero. All of that is free if you use the progress element instead, which is the honest reason to prefer it.

Transition the fill width, and remember stripes are always moving. A transition on width or on the value pseudo-element smooths a jump from 20 to 60 per cent and makes progress feel continuous rather than stepped, and 200 to 400 milliseconds is the useful range. Animated stripes are a different matter: they run forever, they repaint on every frame, and on a long page with several bars that is real work for no information. Use them to say a job is alive, not as decoration, and consider a prefers-reduced-motion query around them.

This page styles bars and does not track anything. There is no JavaScript here for updating a value from a real task, no buffered or segmented bar, no circular or radial progress, and no stacked multi colour bar. It also cannot read an existing stylesheet back into the controls, and the indeterminate animation for the native element is only styled in the engines that expose the pseudo-element, so a browser may keep its own indeterminate look.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Both kinds of bar The native progress element and a div bar, styled side by side.

Vendor rules written out WebKit and Moz pseudo-elements, each as its own separate rule.

Gradient and stripes A two colour fill, and stripes that move without an image.

Indeterminate state Motion for a job whose length you genuinely do not know.

The ARIA you need The markup comment carries the role and value attributes.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Progress Bar Generator

There are two ways to put a progress bar on a page and they fail in opposite directions. The progress element is the right one semantically, announces itself to assistive technology and needs no attributes you would forget, but styling it means reaching into internals that only vendor pseudo-elements expose. A pair of divs is trivial to style and means nothing at all until you add the ARIA that tells a screen reader what it is looking at.

This page generates both, so you can compare them with the same colours and the same height. The preview holds a real progress element and a real div bar, and the generated stylesheet is applied to both, so the vendor rules are genuinely being tested by whichever browser you are reading this in rather than described in the abstract.

The detail that costs people the most time is the one the notes labour. The WebKit and Moz pseudo-elements must be written as separate rules. Put them in one selector list to save a few lines and every engine drops the entire rule, because an unrecognised selector invalidates the whole list rather than just its own part. The output keeps them apart, in the order the engines expect, and adds the appearance: none without which the WebKit rules do nothing.

Frequently Asked Questions

Vendor prefixes, ARIA, stripes and the indeterminate state.

Because the element is drawn by the browser rather than laid out as a normal box. You need appearance: none first, then the track and fill are styled through ::-webkit-progress-bar and ::-webkit-progress-value in Chrome and Safari and through ::-moz-progress-bar in Firefox. A background on the element itself does show in Firefox, which uses it as the track, so the output sets both.

No, and it is the most common reason a styled bar silently does nothing. CSS discards an entire rule if any selector in its list is invalid for that engine, so writing ::-webkit-progress-value, ::-moz-progress-bar together means Chrome drops the rule because of the Moz selector and Firefox drops it because of the WebKit one. They must be separate rules, even though the declarations inside them are identical.

Use progress unless the design needs something it cannot do, such as stripes over the fill in every engine or a segmented bar. It is announced correctly, updates its value from one attribute and needs no ARIA. Reach for the div when you need full control of the fill, and accept that you then owe the page role="progressbar" and an aria-valuenow you keep in sync.

A repeating-linear-gradient at 45 degrees with two stops produces the stripe pattern, background-size sets how wide one repeat is, and animating background-position by exactly that width in a loop makes the stripes appear to slide. Because the loop distance matches the pattern width, the animation is seamless. It downloads nothing, but it repaints continuously while it runs.

For work whose length you do not know, such as waiting on a server that gives no total. A native progress with no value attribute is indeterminate automatically. For a div bar the tool generates a short fill that slides across the track, and in that case you should leave aria-valuenow off entirely, because a made up number is worse than no number.