Live preview Progress
Oasis Stairs Progress
A staircase of five blocks where the climbed tiers are lit and a marker sits on the current step.
Progress — 100 CSS effects
Progress bars, rings, meters, and completion indicators.
Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.
Page 1 of 2
Live preview Progress
Origami Cusp Progress
Eight paper facets alternate their crease direction and the five set folds carry the colour.
Live preview Progress
Amber Sheen Progress
A polished amber fill with a light sheen that sweeps across it on a loop.
Live preview Progress
Anvil Stroke Progress
A piston head runs the bore back and forth while the charge ahead of it is compressed.
Live preview Progress
Bearing Heat Progress
A thermal band read from a cold to hot ramp with a glowing knob parked at the current reading.
Live preview Progress
Blush Bloom Progress
Six petals ring a pulsing golden heart and the four opened ones report the current share.
Live preview Progress
Chassis Throughput Progress
A transfer rate panel that plots fourteen recent samples against a dashed average line.
Live preview Progress
Coral Comet Progress
The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.
Live preview Progress
Glacier Wizard Progress
A wizard header with five numbered nodes sitting on one continuous rail that fills to the live step.
Live preview Progress
Organza Sway Progress
Two sine wave surfaces roll in opposite directions over a liquid level held at fifty five percent.
Live preview Progress
Tulle Wisp Progress
Seven motes of stardust lift off the filled span and fade away as they rise into the dark.
Live preview Progress
Arcade Pulse Progress
A retro cabinet meter made of chunky bevelled pixel blocks where the leading block keeps flashing.
Live preview Progress
Atelier Hush Progress
A minimalist reading indicator drawn with one hairline rule, a single tick and widely tracked type.
Live preview Progress
Aurora Queue Progress
An upload queue where three files each carry their own track, ratio and percentage read out.
Live preview Progress
Basalt Cells Progress
Twelve separate basalt cells act as one bar; eight of them are lit for the current value.
Live preview Progress
Bauhaus Vault Progress
A primary coloured arch fills with yellow to the current value beside a disc, a square and a wedge.
Live preview Progress
Brass Thread Progress
A hairline track with rounded caps whose warm brass fill breathes between six and eighty four percent.
Live preview Progress
Brocade Coil Progress
A bobbin seen side on where the wound thread covers the core and the loose strand keeps tugging.
Live preview Progress
Caliper Runner Progress
An open ended loader where a train of five dots keeps running through the tube from left to right.
Live preview Progress
Canyon Quota Progress
A storage quota bar that prints used against total and drops two threshold markers on the track.
Live preview Progress
Carmine Zenith Progress
A triangle fills from its base toward the apex with a dashed rule pinned at the reached level.
Live preview Progress
Cascade Trail Progress
A vertical pipeline trail whose rail fills down to the running stage while that node keeps pulsing.
Live preview Progress
Chalk Steps Progress
A four stage step tracker where completed marks carry a drawn tick and a green connector.
Live preview Progress
Circuit Manometer Progress
A round pressure dial with a tick ring, a red danger band and a needle that keeps quivering.
Live preview Progress
Cobalt Stack Progress
One track carrying three stacked segments plus a legend that colour codes each slice.
Live preview Progress
Conduit Sync Progress
Two chasing arrow arcs turn forever beside a device count and the current sync share.
Live preview Progress
Copper Steps Progress
A ladder of dots that grows toward the right; the lit copper dots mark the current stage.
Live preview Progress
Cove Status Progress
The status line and the bar share one timeline, so the label flips to complete as the fill lands.
Live preview Progress
Delta Poll Progress
Poll rows where the vote share is painted behind the option name instead of on a separate track.
Live preview Progress
Dune Track Progress
A race rail with distance ticks and a chequered flag while a glowing marker runs the lap.
Live preview Progress
Dynamo Twinring Progress
A hairline outer arc carries the value while a dotted inner ring keeps turning for state.
Live preview Progress
Ember Health Progress
A skewed game health bar whose colour is read off a fixed red to lime ramp and split by notches.
Live preview Progress
Enamel Flux Progress
Beads of enamel travel in and merge into the filled mass through a blur and contrast gooey filter.
Live preview Progress
Fjord Rating Progress
A review breakdown that stacks five bars from five stars down to one under an average score.
Live preview Progress
Flange Vumeter Progress
An analogue volume unit meter whose needle keeps flicking across a scale into the red end.
Live preview Progress
Flint Orbit Progress
A slim conic ring with the percentage printed at its centre and a slow pulsing halo.
Live preview Progress
Forge Conveyor Progress
Crates ride a treading belt and drop into a bin that is already filled to two thirds.
Live preview Progress
Frost Bar Progress
A flat frosted bar with a label row and a soft cyan glow on the filled span.
Live preview Progress
Garnet Native Progress
The real progress element restyled with separate WebKit and Gecko pseudo element rules.
Live preview Progress
Gasket Ladder Progress
A vertical ladder of ten rungs lit from the bottom up, with the peak pair reserved for red.
Live preview Progress
Gear Copy Progress
A copy dialog where a sheet keeps flying from the source folder into the destination folder.
Live preview Progress
Gilt Arc Progress
An art deco crown of five nested arches where the three gilded bands mark the reached value.
Live preview Progress
Girder Odometer Progress
Two mechanical digit reels roll through their numbers behind a fixed percent sign.
Live preview Progress
Granite Gauge Progress
A half circle gauge built from a conic gradient anchored at the bottom centre of the box.
Live preview Progress
Harbor Dual Progress
Two concentric rings carry two different metrics with a colour matched key column beside them.
Live preview Progress
Indigo Ripple Progress
An organic ink blot marks the covered share while three rings keep spreading out from it.
Live preview Progress
Ivory Slide Progress
An indeterminate bar: a soft ivory shuttle keeps running across the track with no fixed value.
Live preview Progress
Jade Column Progress
Five vertical jade columns fill from the bottom, each carrying its own label underneath.
Live preview Progress
Kiln Aperture Progress
A gate valve leaves part of the port open and the flow behind it keeps drifting upward.
Live preview Progress
Lagoon Topbar Progress
The hairline page loader that lives on top of a browser frame and stalls near the end.
Live preview Progress
Lapis Meter Progress
Two native meter elements styled as lapis capsules through their vendor pseudo elements.
Live preview Progress
Lattice Fuel Progress
A fuel gauge with a blinking droplet icon, empty and full end marks and a low reserve fill.
Live preview Progress
Lever Beacon Progress
A three lamp tower where only the running stage is lit and the other two stay dark.
Live preview Progress
Lumen Gleam Progress
A lamp throws a volumetric beam whose reach is the value, ending in a flickering lens flare.
Live preview Progress
Marble Ring Progress
A thick conic gradient ring cut out with a mask, holding a static seventy two percent sweep.
Live preview Progress
Mauve Quiver Progress
An organic ring holds the value arc while its outline morphs and breathes on a slow cycle.
Live preview Progress
Meadow Thermo Progress
A thermometer with a bulb, a graduated scale column and a mercury level parked at sixty eight percent.
Live preview Progress
Mesa Retro Progress
A retro terminal meter with bevelled blocks, a scanline overlay and a monospaced read out.
Live preview Progress
Mica Grid Progress
Progress drawn as a grid of small mica tiles where fifteen of twenty four blocks are filled.
Live preview Progress
Monsoon XP Progress
A level badge sits beside an experience bar that is divided into ten notched tenths.
Live preview Progress
Mosaic Orbit Progress
A hexagonal cell fills from its base instead of a circle while a small hex satellite orbits it.
Live preview Progress
Muslin Drift Progress
A sealed chamber fills with fog while two blurred puffs waft sideways at different speeds.
Live preview Progress
Neon Halo Progress
A vaporwave ring in magenta and cyan wraps a slatted retro sun that carries the percentage.
Live preview Progress
Nickel Timer Progress
A countdown bar that drains from full to empty and shifts from green through amber to red.
Live preview Progress
Obsidian Dash Progress
A dashed ring made by masking a conic gradient with a repeating conic pattern of ticks.
Live preview Progress
Ochre Wander Progress
Sand runs out of a funnel in a thin stream and the grains wander down onto a growing heap.
Live preview Progress
Onyx Stripe Progress
Diagonal hazard stripes fill the track to sixty percent with a hard edged onyx frame.
Live preview Progress
Opal Tide Progress
A round vessel filled to sixty two percent with a rotating blob that reads as a moving tide.
Live preview Progress
Pearl Cell Progress
A battery shaped indicator with a moulded cap and a pearl fill sitting at seventy eight percent.
Live preview Progress
Piston Tachometer Progress
A rev counter whose banded arc runs into a red zone while the pointer keeps sweeping the range.
Live preview Progress
Plume Spiral Progress
An arc built spiral winds outward through a stroke dash offset instead of running along a bar.
Live preview Progress
Prairie Usage Progress
A plan usage meter with banded tiers and a bubble pointer that hangs over the current value.
Live preview Progress
Pylon Cogwheel Progress
A toothed wheel turns against a smaller counter rotating one while a ring holds the value.
Live preview Progress
Quartz Drift Progress
The violet fill carries a striped overlay that slides sideways forever while the width stays put.
Live preview Progress
Ratchet Segments Progress
Seven chamfered LED segments climb a green to red ramp with five of them currently driven.
Live preview Progress
Reef Dots Progress
Carousel page dots where the active pill stretches and hosts its own autoplay timer bar.
Live preview Progress
Ridge Rings Progress
Three nested activity rings track move, burn and stand goals inside one compact dial.
Live preview Progress
Rivet Defrag Progress
A dense disk map of sixty blocks in three states with a scanning beam crossing the grid.
Live preview Progress
Ruby Drop Progress
A download row with a bobbing arrow glyph, a transferred size read out and a ruby fill.
Live preview Progress
Savanna Target Progress
A bullet style comparison where the reached bar runs under a raised marker showing the target.
Live preview Progress
Sepia Echo Progress
A monochrome engraving plate where dense cross hatching marks the value under a ghosted numeral.
Live preview Progress
Shaft Fraction Progress
Progress printed as a plain fraction over twelve slats, seven of which are already driven.
Live preview Progress
Slate Block Progress
A chunky inset slab where the percentage is printed inside the filled block itself.
Live preview Progress
Socket Squeeze Progress
A compression read out where the packed lane keeps collapsing against the raw lane above it.
Live preview Progress
Spindle Signal Progress
Four rising strength bars where three are lit and the leading one keeps breathing on the edge.
Live preview Progress
Stark Dash Progress
A brutalist meter with a hard offset shadow, three pixel outlines and a dashed leading edge.
Live preview Progress
Summit Numeral Progress
The value is the interface: an oversized clipped gradient numeral over a rule that matches its share.
Live preview Progress
Tether Ruler Progress
An engraved calibration ruler with minor and major graduations under a dropped cursor.
Live preview Progress
Thicket Countdown Progress
An SVG ring counts a window down by animating its stroke dash offset all the way around.
Live preview Progress
Tide Tube Progress
A vertical glass tube holds a liquid level at fifty five percent while bubbles rise through it.
Live preview Progress
Topaz Skills Progress
A three row skill list where each label sits above its own topaz coloured meter.
Live preview Progress
Tundra Glass Progress
An hourglass built from two clipped triangles where the upper chamber drains as the lower one packs.
Live preview Progress
Turbine Charge Progress
An upright cell whose electrolyte keeps climbing behind a bolt glyph while it charges.
Live preview Progress
Valley Ticks Progress
Twelve rotated tick marks form a circular counter with eight of them lit around a centre count.
Live preview Progress
Valve Toolchain Progress
Three build stages chained by chevrons, each carrying its own meter and the live one still filling.
Live preview Progress
Vellum Verge Progress
Ink soaks across a fibrous paper strip and the blurred wet edge keeps creeping at the verge.