Vertical histories, horizontal steps and progress trails.
A timeline is a list with a line drawn through it, and it should be an `<ol>` in the markup for exactly that reason. The connector is a pseudo-element on each item rather than a separate div, so the line ends where the list ends instead of hanging past the final entry — which is the bug in most implementations.
Activity timeline with blue nodes; entries stagger in and the current step pulses.
Three-stage horizontal stepper; completed stages fill with the ocean gradient and connect their rails.
Pipeline indicator: an ocean rail advances through stages while each label lights in turn.
Build log timeline with ocean completed nodes, CSS-drawn checkmarks and a pulsing current step.
Horizontal roadmap with an ocean rail and milestone nodes that pop in one after another.
Four-step wizard with completed ticks, a pulsing current step and ocean connector rails.
Entries flipping side to side across a centre spine, with each node punched out of the rail by a background-colored ring.
Ordered list where the connector belongs to the step behind it, so a completed leg fills without any element spanning two items.
Event stream with avatars punched out of a connecting spine, refs set in monospace so an identifier never reads as prose.
Schedule rows offset by margin and sized by width, over a gridline background positioned to start where the track does.
Roadmap where the current stage fills only half its connector, so "in progress" is visible on the rail rather than only in the node styling.
Changelog entries with the version as a monospace tag, the latest highlighted so "what shipped most recently" is answerable without reading dates.
Branch-and-merge history drawn with positioned gradient segments instead of SVG, so the fork stub, the parallel lane and the merge elbow are each one background layer.
Two-level plan where sub-tasks hang off a rail indented under their parent, each connected by a stub, so progress inside a phase is visible without expanding it.
Parcel progress with the vehicle riding the rail to the current node, both driven by the same easing so the marker and the fill arrive together.
Progress stepper made of pill segments where the next segment lights up and swells on hover.
Arrow-shaped step chips that nest into one another like a breadcrumb trail and highlight on hover.
Circular progress dial split into step arcs with a centre count, where hover previews the next arc lighting up.
Horizontal tick ruler with month labels and a flagged marker that slides forward on hover.
Vertical onboarding steps rendered as icon pills on a dotted rail, each nudging sideways on hover.
Story-style segmented progress bars where the active segment fills on a loop and pauses on hover.
Transit-map progress line where stops are ring stations, interchanges are drawn larger and the live stop carries a halo.
Setup checklist where each step carries its own time estimate and the running step spins a partial ring instead of a tick.
Milestone rail where every entry carries a thumbnail beside its label, the image tilting and lifting as the row is hovered.
Showing 24 of 33. Search the rest →
Determinate bars, rings, meters and step indicators.
Multi-step wizards, checklists, tours and welcome screens.
Rotating loaders built from borders, conic gradients and dots.
Scroll-snap tracks, marquees and logo tickers.
Floating labels, filled and outlined fields, focus rings.
Error, success and required styling driven by CSS selectors.