12 CSS Progress Bar Designs

components css-only

A CSS progress bar is the visual indicator that shows how close a task is to completion. These 12 hand-coded designs are ready-to-ship progress UIs for file uploads, multi-step checkouts, skill levels, fundraising goals, and onboarding flows — copy the markup, bind to your value, and ship.

12 unique progress bars 11 Pure CSS 1 CSS + JS 100% copy-paste ready Published May 4, 2026

01 / 12

Liquid Fill

Pure CSS

Wave-animated water rising inside a rounded vessel — perfect for resource meters, storage usage, and "fill your goal" patterns.

Live Demo Try it

02 / 12

Step Tracker

Pure CSS

Numbered steps with a connecting rail that fills as you progress.

Live Demo Try it

03 / 12

Conic Ring

Pure CSS

A circular progress ring rendered with a real `@property`-animated conic gradient — no SVG, no JS scoring.

Live Demo Try it

04 / 12

Segmented Battery

Pure CSS

Discrete signal-bar segments that fill from left to right.

Live Demo Try it

05 / 12

Stripe Loading

Pure CSS

Diagonal candy-stripes shimmer continuously inside the filled portion — instantly reads as "actively in progress." A premium touch lifted from server-software install dialogs and CI build runners.

Live Demo Try it

06 / 12

Gradient Pulse

Pure CSS

A premium hero progress bar with a glowing leading edge that pulses gently.

Live Demo Try it

07 / 12

Goal Tracker

Pure CSS

Vertical fundraising-style progress with milestone markers.

Live Demo Try it

08 / 12

Skill Bars

Pure CSS

Stacked horizontal bars with labels and percentages.

Live Demo Try it

09 / 12

Circular Counter

Light JS

A radial chart with a synchronised counting number in the centre.

Live Demo Try it

10 / 12

Stacked Categories

Pure CSS

A single bar split into multiple coloured segments — Documents, Photos, Apps, Free.

Live Demo Try it

11 / 12

Speed Test Gauge

Pure CSS

An SVG semicircular speedometer with a colour-graded arc (red → amber → green), tick marks at 0/50/100, and a needle that sweeps from the bottom.

Live Demo Try it

12 / 12

Buffer Bar

Pure CSS

Video-player progress bar with two filled regions: solid played + lighter buffered ahead.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Gradient Generator

The bar fill is usually a gradient.

FAQ

Frequently asked questions

What is a CSS progress bar?

A progress bar is a visual indicator showing how much of a task or value has been completed against a target. It can be linear (a horizontal bar), circular (a ring or arc), or segmented (discrete steps). Used for file uploads, form completion, skill levels, fundraising goals, and storage usage. For multi-stage flows where each step is a named milestone rather than a percentage, look at the [CSS timeline patterns](/layouts/css-timelines/) instead.

Should I use the native HTML progress element?

Yes when you can. Native progress is the most accessible option — assistive tech announces the value automatically. The patterns here use either a real progress element or a labelled SVG with role=progressbar plus aria-valuenow / aria-valuemin / aria-valuemax for the same semantics.

How do I make a circular CSS progress bar?

Two common approaches: (1) an SVG circle with stroke-dasharray and pathLength=100 — animate stroke-dashoffset from 100 to (100 - value); or (2) a conic-gradient with @property animation — animate the angle from 0deg to value*3.6deg. Both work without JavaScript for static values.

Are these progress bars accessible?

Yes. Each demo uses either a native progress element or a div with role=progressbar plus aria-valuenow, aria-valuemin, aria-valuemax and an associated label. Continuous animations (stripes, gradient pulse) honour the prefers-reduced-motion media query.

Do these progress bars need JavaScript?

Most don't. The visual fill is driven by a single CSS custom property (--value) that you set inline or with one line of JS. Only the Circular Counter needs ~20 lines of JS to keep the centre number in sync with the ring animation; the rest are pure CSS.

Related collections

22 CSS Button Group Designs

22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.

button group css button group segmented control Responsive

43 CSS Button Designs

43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.

buttons hover animation Responsive

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive