Live preview Progress
Glacier Wizard Progress
A wizard header with five numbered nodes sitting on one continuous rail that fills to the live step.
#steps CSS effects
22 free, pure-CSS effects match the "steps" tag. Each is copy-ready and needs no library or build step.
Live preview Accordions
Caliper Guide Accordion
Step numbers come from a CSS counter, so no digit is written into the markup.
Live preview Accordions
Garnet Steps Accordion
Numbered steps joined by a connector line, with only one step expanded.
Live preview Alerts
Caliper Delivery Alert
A shipment tracker where the parcel pushes forward then falls back to the held node.
Live preview Alerts
Dynamo Pending Alert
An approval flow of three nodes where charge flows into the step still being reviewed.
Live preview Alerts
Monsoon Scale Alert
Four severity segments light up in order and stop at the level the incident reached.
Live preview Avatars
Anvil Quadrant Completion Meter
Four border arcs form the completion ring and the last quadrant lights up on hover.
Live preview Modals
Bloom Level Up Modal
A chunky pixel art level up panel blooms open in five discrete jumps and then fills its XP bar.
Live preview Modals
Ratchet Permission Modal
A notification permission prompt drops in stepwise, clicking down one notch at a time.
Live preview Marquees
Flux Arrow Links
Pipeline stages are chained by arrow glyphs that keep nudging toward the next step.
Live preview Marquees
Garnet Step Ticker
A stepped timing function turns the smooth glide into discrete mechanical jumps.
Live preview Marquees
Lapis Type Line
Stepped motion plus a blinking block caret give the strip a teletype feeling.
Live preview Marquees
Ratchet Odometer Bank
Counter drums click through their digits while the whole meter bank rolls left.
Live preview Marquees
Spiral Bullet List
A real list scrolls sideways and each square marker turns a quarter on every beat.
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
Girder Odometer Progress
Two mechanical digit reels roll through their numbers behind a fixed percent sign.
Live preview Sliders
Granite Ticks Slider
Five discrete stops backed by a datalist, with tick marks drawn under the rail.
Live preview Sliders
Topaz Steps Slider
The rail is cut into five lit segments so every step lands on a visible block.
Live preview Tables
Ratchet Quota Gauges
Plan usage gauges fill in discrete notches with a stepped timing function instead of gliding.
Live preview Timelines
Canyon Checkout Steps
Cart to payment to confirmation, where a cleared step swaps its digit for a tick.
Live preview Timelines
Ratchet Line Steps
A pawl jumps from station to station along a toothed rail and never slides back.
Live preview Timelines
Rivet Assembly Steps
Numbered part codes hang off a rail whose domed rivet heads turn under the cursor.