CSS Timelines & Steps Effects

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.

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.

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.

Arrow-shaped step chips that nest into one another like a breadcrumb trail and highlight on hover.

Transit-map progress line where stops are ring stations, interchanges are drawn larger and the live stop carries a halo.

Fundraising tube filled from the bottom with milestone ticks scored across it and money labels beside each one, the reached amounts warmed and the level climbing toward the next milestone on hover.

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.

Changelog entries with the version as a monospace tag, the latest highlighted so "what shipped most recently" is answerable without reading dates.

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.

Circular progress dial split into step arcs with a centre count, where hover previews the next arc lighting up.

Milestone rail where every entry carries a thumbnail beside its label, the image tilting and lifting as the row is hovered.

Departure and arrival airports at either end of a dashed route, with a plane marker that flies the length of the path on hover and the flight details ruled off underneath.

Horizontal tick ruler with month labels and a flagged marker that slides forward on hover.

Four stage pills pinned around a dashed circle with a coloured arc orbiting it, for a process that never really ends.

Lesson chain running from a struck-through completed step through the in-progress one with its own part-filled bar, down to a padlocked step that is still out of reach.

Vertical onboarding steps rendered as icon pills on a dotted rail, each nudging sideways on hover.

Sign-off chain of avatars along a line that changes colour as it passes each approver, the pending one pulsing amber.

Two dashed lifelines with request arrows crossing between them in order, a solid arrow out, a dashed reply back, and an activation bar marking how long the server was busy.

Progress stepper made of pill segments where the next segment lights up and swells on hover.

Setup checklist where each step carries its own time estimate and the running step spins a partial ring instead of a tick.

Four steps dropped into two owner lanes, with diagonal connectors cutting between the lanes at every handoff so the work is seen changing hands twice.

Story-style segmented progress bars where the active segment fills on a loop and pauses on hover.

Four numbered stages threaded around a dashed S-shaped route, so the journey doubles back instead of running in a straight line.

Version list running oldest to newest where pointing at an entry offers to restore it and strikes through every later edit, previewing exactly what rolling back would throw away.