Live preview Accordions
Topaz Progress Accordion
A thin progress line under each header runs to full width as the row opens.
#progress CSS effects
18 free, pure-CSS effects match the "progress" tag. Each is copy-ready and needs no library or build step.
Live preview Accordions
Willow Line Accordion
A hairline sits under each header and a lit segment travels it while open.
Live preview Alerts
Delta Progress Alert
A working notification whose progress track fills while a highlight sweeps the bar.
Live preview Alerts
Quartz Countdown Alert
A draining progress bar on the top edge counts down until the notice retires.
Live preview Avatars
Dune Completion Ring Avatar
An SVG progress ring reports profile completion and refills when hovered.
Live preview Avatars
Spindle Level Ring Avatar
A conic experience ring wraps the avatar and the level chip glows under it.
Live preview Modals
Copper Toast Modal
A notification strip drops from the top edge and drains a copper timer bar.
Live preview Modals
Prairie Onboarding Modal
An onboarding step springs up from below and its progress rail fills once it lands.
Live preview Marquees
Quiver Underline Bar
A slim progress rule refills under the rail, marking each pass of the moving caption.
Live preview Sliders
Slate Pill Slider
A thick slate capsule rail where a violet fill tracks the pale pill handle.
Live preview Tabs
Ivory Progress Tabs
An ivory progress line under the panel grows as later tabs are selected.
Live preview Tables
Flange Order Stages
Each order shows a linked three dot pipeline and the stage in progress keeps sending a ping.
Live preview Tables
Opal Cell Meter
Every row carries an inline progress meter that grows out from its left edge.
Live preview Tables
Tether Translation Rings
Completion per locale is drawn as a conic gradient donut and the finished one holds a soft pulse.
Live preview Timelines
Coil Reading Shelf
A reading list drawn as book spines where the read part of each title fills from below.
Live preview Timelines
Dune Upload Stages
Upload stages carry their own percentage and the busy bar marches with stripes.
Live preview Timelines
Meadow Episode List
Podcast episodes stack in order and the one playing swaps its arrow for an equaliser.
Live preview Timelines
Opal Progress Timeline
An opal fill climbs the rail on load and halts at the step still under way.