Angular Timeline & Progress Steps | ng-hub-ui-milestones

Angular timeline and progress-steps component: vertical or horizontal, fully customizable nodes, content inside and beside each step, themed with CSS variables.

Last updated Aug 8, 2026

Overview

Why teams search for this library

Choose this Angular timeline component when you need a presentational progress tracker — onboarding flows, order tracking, roadmaps — with custom nodes and both vertical and horizontal layouts.

Install

npm install ng-hub-ui-milestones

Jump to

Ideal for

  • onboarding flows
  • order tracking
  • roadmaps
  • process steps

About milestones

ng-hub-ui-milestones lays out a series of steps connected by a rail, vertically or horizontally. Each node is fully customizable — number, icon, avatar or any markup inside the circle, plus rich content beside it — and every colour, size and connector is a CSS variable, so it re-themes at runtime.

Feature guides

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.

Examples:
Vertical timeline

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

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.

Examples:
Node states

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.

Examples:
Custom nodes & per-node color

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

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`.

Examples:
Horizontal with active pulse

Horizontal with active pulse

Ordered

Payment received.

Packed

Ready to ship.

In transit

Out for delivery now.

Delivered

Arriving soon.

Key features

Recent changes

Version 22.3.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.3.0 - 7/28/26, 12:00 AM

changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.

added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.

Version 22.2.1 - 7/28/26, 12:00 AM

fixed: Each milestone exposes role=listitem and the active node announces aria-current=step, completing the list semantics the container already declared.

Version 21.0.0 - 6/14/26, 12:00 AM

added: Initial release: hub-milestones container (vertical / horizontal orientation, auto-numbered nodes) and hub-milestone node with complete/active/pending/error states.

added: Per-node color override, label fallback and custom in-circle content via the hubMilestoneNode template directive.

added: Full --hub-milestone-* CSS-variable theming for node, connector, states and spacing.

Related libraries

ng-hub-ui-stepper ng-hub-ui-nav ng-hub-ui-panels

Frequently asked questions

How do I build a timeline component in Angular?

Install ng-hub-ui-milestones and give HubMilestonesComponent a list of steps. It draws the rail and the nodes and marks each step's state, which makes it a fit for order tracking, onboarding flows and project roadmaps where the timeline is presentational rather than interactive.

Can the timeline be horizontal instead of vertical?

Yes. HubMilestonesOrientation switches the whole layout between vertical and horizontal with one input, and the same step content works in both — useful when the timeline is a sidebar on desktop and a horizontal strip on narrow screens.

How do I put custom content inside each timeline node?

HubMilestoneNodeDirective replaces the circle at each step, so a node can be a number, an icon, an avatar or any markup you want. Rich content can also sit beside the node, which is how you attach dates, descriptions or actions to a step.

What is the difference between a timeline and a stepper in Angular?

A timeline shows progress that has already happened or is planned, and the user does not drive it. A stepper guides someone through a form or a wizard, validating each step. Use ng-hub-ui-milestones to display a sequence and ng-hub-ui-stepper when the user must advance through it.