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.
API reference
Here's the full contract for milestones: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial milestones in with 6 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | Layout direction of the timeline. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | Visual state of the node; drives the node and connector colors. |
color (hub-milestone) | string | '' | Per-node color override (any CSS color). Wins over the state color. |
label (hub-milestone) | string | '' | Fallback text shown inside the node when no `hubMilestoneNode` template is provided. |
pulse (hub-milestones) | boolean | false | When set on `<hub-milestones>`, the active node emits a soft expanding wave to draw attention to the current step. Opt-in; respects `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | When the timeline scrolls into view it animates the accent trail filling up to the active node. On by default — configure globally with `provideHubMilestones({ reveal: false })` or per instance with `[reveal]`. Respects `prefers-reduced-motion`. |
Outputs
No outputs documented yet.
Templates
Make it yours — 2 template slots let you project custom markup.
| Name | Description | Example |
|---|---|---|
hubMilestoneNode | Marks an `<ng-template>` whose content renders INSIDE the milestone circle (number, icon, emoji, avatar). Takes precedence over `label` and auto-numbering. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | Any content projected directly into `hub-milestone` (outside the node template) renders as the body next to the circle. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
CSS variables
Theme every pixel with 20 CSS variables. Override them at :root or scope them to a wrapper.
Node
The circular node: its size, colors and the per-state surfaces.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | Diameter of the node circle. |
--hub-milestone-node-font-size | 1.05rem | length | Font size of the node content (number / label). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | Node background for complete / active states. Per-node `color` overrides this. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | Node content color on colored nodes. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Pending node background. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | Pending node content color. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | Pending node border color. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | Error node background. |
Connector & layout
The rail drawn between nodes and the spacing of the timeline.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | Thickness of the connecting rail. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | Fill of the connector between completed / active nodes. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Connector fill leading into a pending node. |
--hub-milestone-gap | 1rem | length | Gap between the node rail and the body content. |
--hub-milestone-spacing | 1.75rem | length | Spacing between consecutive steps. |
Body
The text content projected next to each node.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | Primary body text color. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | Muted / secondary body text color. |
Animation
Tune the optional active-node pulse and the viewport reveal trail.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | Colour of the active-node pulse wave. Defaults to the node accent, so it follows any per-node `color` override. |
--hub-milestone-pulse-duration | 1.6s | string | Duration of one pulse cycle. |
--hub-milestone-pulse-spread | 0.75rem | length | How far the pulse wave expands outward from the node. |
--hub-milestone-reveal-duration | 0.5s | string | Duration of each connector's fill during the viewport reveal. |
--hub-milestone-reveal-stagger | 0.14s | string | Delay between consecutive connectors filling, creating the cascading reveal. |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.