Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Orientation

Lay the timeline out vertically (the default, ideal for wizards and activity feeds) or horizontally (progress steps across the top of a page). Nodes are numbered automatically in DOM order.

Vertical timeline

Information

Account details captured and verified.

Shipping

Delivery address confirmed.

Payment

Enter your payment method to continue.

Review

Place the order once everything looks right.

Horizontal progress steps

Information

Account verified.

Shipping

Address confirmed.

Payment

In progress.

Review

Last step.

Node states

Each `hub-milestone` carries a `state` — complete, active, pending or error — that drives the node and connector colors. The `label` input renders fallback text inside the circle.

Node states

Complete

A finished step.

Active

The current step, highlighted with a ring.

Error

Something needs attention here.

Pending

Not started yet.

Custom nodes & theming

Project any content into the circle with `<ng-template hubMilestoneNode>` (numbers, icons, emoji, avatars), override a single node with `color`, or re-theme the whole timeline through `--hub-milestone-*` CSS variables.

Custom nodes & per-node color

Drafted

Article written and saved.

Reviewed

Approved by the editor.

Publishing

Going live across channels.

Promotion

Scheduled for next week.

CSS-variable theming

Kickoff

Project scoped and approved.

Build

Core features shipped.

Launch

Rolling out to production.

Animation

When the timeline scrolls into view it completes its accent trail up to the active node — on by default and configurable globally with `provideHubMilestones`. Add `[pulse]` to make the active node emit a soft wave. Both animations respect `prefers-reduced-motion`.

Horizontal with active pulse

Ordered

Payment received.

Packed

Ready to ship.

In transit

Out for delivery now.

Delivered

Arriving soon.