CSS Progress Bars

26 animated CSS progress bars: indeterminate loading bars, striped and gradient fills, segmented steps and circular progress. Each is a single HTML + CSS snippet.

Indeterminate Progress Bar

A thin track with a bar that slides across it endlessly. Use it when you have no idea how long the wait is, at the top of a page or under a form.

bars · progress · minimal

Top Page Loading Bar

The thin glowing bar that runs along the top of the page while a route loads, the way YouTube and GitHub do it. Swap absolute for fixed to pin it to the viewport.

bars · progress · page · minimal

Circular Progress with Percentage

A ring that fills clockwise while the number in the middle counts up to 100%. The counter is pure CSS using a registered custom property, so there is no JavaScript to wire up.

progress · ring · text

Battery Charging Loader

A battery outline that fills from empty to full, then resets. Good for uploads, installs and anything with a clear 'done' at the end.

progress · playful · shapes

Pie Spinner

A solid wedge sweeps round until the circle is full, then its trailing edge sweeps after it and empties it again. Two registered angle properties drive one conic-gradient.

spinner · progress · gradient

Activity Rings Loader

Three nested rings fill to different amounts one after another, hold, then rewind, like a fitness tracker. The colors are your accent hue-rotated, and pathLength sets how far each ring fills.

ring · progress · colorful

Donut Chart Loader

Three donut chart segments trade shares back and forth while the chart turns slowly, a natural placeholder for dashboards and reports. Each segment is an SVG circle with its own dash and offset.

ring · progress · colorful

Gauge Loader

A speedometer arc revs up with an overshoot, holds near the red line, then drops back to zero. The needle and the fill share one timing curve, so they always agree on where the value is.

ring · progress · playful

Audio Waveform Loader

A static waveform of rounded bars fills with color from left to right like a voice message playing, then fades back. One SVG clipPath holds the bars, one scaled rect does the fill.

bars · progress

Material Linear Progress Bar

Google's indeterminate linear indicator: two segments chase across the track, each stretching and shrinking on the Material easing curves. Transform only, so it stays smooth.

progress · bars · minimal

Striped Progress Bar

A rounded bar with diagonal stripes that scroll forward while the fill creeps up in uneven steps, like a real install. The fill is revealed with clip-path, so the stripes never stretch.

progress · bars · retro

Percentage Progress Bar

A linear bar whose percentage rides above the fill in a small tooltip, counting from 0 to 100%. The number is pure CSS: a registered @property feeds both the counter and the fill.

progress · bars · text

Stepper Progress Bar

Four steps joined by connectors that fill one after another; each step pops as it becomes current and turns into a check once it is done. One registered @property drives every state.

progress · icon · minimal

Video Buffering Progress Bar

A video scrubber: the buffered range jumps ahead in chunks while the played range and its knob follow at a steady speed, stalling whenever they catch up. Good for media and download UIs.

progress · bars

Gradient Progress Bar

A fill that slides in, holds, then sweeps off while a multi-hue gradient flows through it. The hues are rotated from your accent with relative oklch colors, with a color-mix fallback.

progress · gradient · colorful

Segmented Progress Bar

Ten separate blocks light up one at a time with a small springy pop, hold full for a beat, then switch off in the same order. Each block is one span with an --i index for its delay.

progress · bars · minimal

Glowing Progress Bar

A thin bar that fills in uneven bursts behind a bright glowing head, which flares when it reaches the end. The head is one element with a static glow that only moves by transform.

progress · glow · bars

Shimmer Progress Bar

A squared-off install bar that steps forward with a slight spring while a band of light keeps running through the filled part, the way desktop installers show they are still alive.

progress · bars · retro

Wavy Progress Bar

The Material 3 expressive indicator: the filled part is a squiggle that keeps flowing, the rest is a flat track ending in a stop dot. The wave is one SVG path sliding by a wavelength.

progress · bars · playful

Stacked Progress Bar

A storage usage bar: four colored categories are measured in one at a time, pausing at each boundary, above a matching legend. The hues are rotated from your accent with relative oklch colors.

progress · colorful · bars

Bouncing Dot Progress Bar

An indeterminate pill track with a dot that rallies from wall to wall, stretching as it speeds through the middle and squashing flat against each end, with a faint echo trailing behind.

progress · physics · playful

Liquid Progress Bar

A glass tube fills with two layers of liquid whose leading edges ripple like a wave. Each edge is a strip masked into a sine shape from three gradients, with the mask sliding to make it move.

progress · playful · bars

AI Agent Steps Loader

A three-step task list for AI agents: a spinner walks down the rows and each step turns into a check as it finishes. Change the labels to your own tool calls.

ai · text · spinner · progress

Progress Button Loader

A button that fills with color from left to right as a download runs, with the label flipping to white exactly where the fill has passed. Two stacked labels and one clip-path.

button · progress

Text Fill Loading Animation

Outlined LOADING letters fill with solid color from the left, then the fill slides out to the right. A text stroke plus a moving background clipped to the glyphs, no extra markup.

text · progress · minimal

Uploading Toast Loader

A pill toast with an arrow that keeps launching out of its circle, an 'Uploading 3 files' label and a mini progress bar underneath. Drop it in a corner while files go up.

progress · inline · icon

How to use these progress bars

Open any loader, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no icon fonts, no image files. Each loader's classes are prefixed with its own name so several can share a page.

To change the color, set --ldr-color on the loader or any ancestor. To change the size, set --ldr-size. Everything inside scales from those two values, so a 16px inline spinner and a 96px page loader are the same snippet.

Every snippet ships with a prefers-reduced-motion rule that slows the animation for people who have asked their OS for less motion. Keep it.