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