Live preview Progress
Girder Odometer Progress
Two mechanical digit reels roll through their numbers behind a fixed percent sign.
Featured
Most popular CSS effects
The library's 10,238 effects, ordered by views. They are all pure CSS: copy, paste, and use them with no library or build step.
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.
Live preview Progress
Velour Lull Progress
A neumorphic groove pressed into a soft slab, holding a raised pill and a slowly breathing marker.
Live preview Progress
Violet Kindle Progress
A jagged discharge path where the charged section is stroked bright and keeps sparking unevenly.
Live preview Progress
Vitrine Glide Progress
A frosted glass panel floating over coloured light, with a specular streak gliding across it.
Live preview Progress
Willow Halo Progress
A hairline gradient halo turns forever around a static value arc that holds forty six percent.
Live preview Sliders
Aurora Equalizer Bank
Five vertical faders stand side by side over an aurora-tinted channel bank.
Live preview Sliders
Bearing Detent Percent
Four notches cut the rail into quarter stops and a polished ball bearing snaps between them.
Live preview Sliders
Brass Groove Slider
A deep machined groove holds a polished brass bead between end caps.
Live preview Sliders
Cascade Contrast Slider
A high contrast build with black on white shapes and a thick yellow focus outline.
Live preview Sliders
Chalk Dashed Slider
A dashed chalk line stands in for the rail under a soft powdery handle.
Live preview Sliders
Circuit Mixer Strip
A single mixing-desk channel strip with a name plate, gain scale and grooved fader cap.
Live preview Sliders
Cobalt Focus Slider
Keyboard focus expands a cobalt halo around the handle instead of a flat outline.
Live preview Sliders
Conduit Fuel Gauge
A fuel rail whose green fill buries the red reserve band as the tank climbs, with a range estimate above.
Live preview Sliders
Coral Press Slider
Holding the handle squashes it into the rail and the whole card sinks with it.
Live preview Sliders
Cusp Split Slider
The card, the rail and even the handle are cut in half between a cool and a warm side.
Live preview Sliders
Dash Paper Slider
Kraft cardboard with a fibre grain, a strip of masking tape and a stamped dashed frame.
Live preview Sliders
Delta Balance Slider
A stereo balance control whose rail fades outward from a centre detent mark.
Live preview Sliders
Drift Leak Slider
A warm film light leak keeps sweeping over the panel in screen blend while the knob glows.
Live preview Sliders
Dune Curve Slider
Layered shading bows a perfectly flat rail into what reads as a rounded dune crest.
Live preview Sliders
Echo Board Slider
Solder mask green with silkscreen text, a gold trace rail and four through hole pads.
Live preview Sliders
Ember Spark Slider
The handle carries a spark glyph drawn from background bars and flickers as it burns.
Live preview Sliders
Fjord Zoom Control
A zoom rail flanked by minus and plus glyphs drawn purely from background bars.
Live preview Sliders
Flange Pressure Lever
A conic gauge face reads the regulator while the rail marks its own red zone near the top.
Live preview Sliders
Flint Triangle Slider
A clipped flint arrowhead points down at the rail like a ruler marker.
Live preview Sliders
Flux Holo Slider
An iridescent film keeps drifting through the rail and the sample strip above it.
Live preview Sliders
Forge Log Scale
Evenly spaced decades give a logarithmic frequency feel under a glowing ember readout.
Live preview Sliders
Frost Track Slider
A hairline icy rail carries a glowing round knob that swells under the pointer.
Live preview Sliders
Garnet Scale Slider
A numbered measuring scale sits above a slim rail marked by a glowing garnet blade.
Live preview Sliders
Gasket Opacity Checker
A checkerboard bed shows through a plate whose alpha keeps breathing up and back down.
Live preview Sliders
Gear Ratio Selector
A toothed rail carries a hex-nut handle across eight final-drive ratios listed underneath.
Live preview Sliders
Girder Quality Tier
An I-beam rail with a bolted block handle steps between three labelled render tiers.
Live preview Sliders
Glacier Speed Control
Playback speed between a single slow bar and a stack of accelerating speed lines.
Live preview Sliders
Glide Glass Slider
A frosted plate floats over a blurred colour orb and carries a translucent rail across it.
Live preview Sliders
Granite Ticks Slider
Five discrete stops backed by a datalist, with tick marks drawn under the rail.
Live preview Sliders
Halo Border Slider
The card border and the knob ring are both painted by the same four stop gradient.
Live preview Sliders
Harbor Budget Slider
A budget picker with a large currency readout above and hard limits printed below.
Live preview Sliders
Hush Wire Slider
Everything is one pixel wide: the frame, the rail, the tick comb and the open ring handle.
Live preview Sliders
Ivory Minimal Slider
One hairline rule, one tiny ivory dot and a monospaced readout — nothing else.
Live preview Sliders
Jade Vertical Fader
A vertical mixing fader built with writing-mode, filling upward from the bottom.
Live preview Sliders
Kiln Thermometer Tube
A glass column with a glowing bulb below it stands in for the handle of a kiln thermometer.
Live preview Sliders
Kindle Trail Slider
A single ember keeps running along a dotted fuse line that sits under the thin amber rail.
Live preview Sliders
Lagoon Paired Sliders
Two colour coded controls sit shoulder to shoulder in one card, split by a thin divider.
Live preview Sliders
Lapis Brightness Slider
A brightness rail brightening from night blue to daylight between two markers.
Browse by category
ButtonsCardsLoadersTextBackgroundsCheckboxesTogglesHover EffectsBadgesFormsNavigationTooltipsAccordionsAlertsAvatarsModalsProgressSlidersTabsTablesTimelinesMarquees