Timeline y Pasos de Progreso para Angular | ng-hub-ui-milestones

Componente timeline y de pasos de progreso para Angular: vertical u horizontal, nodos totalmente personalizables, contenido dentro y junto a cada paso, con theming por variables CSS.

Última actualización 8 ago 2026

Visión General

Por qué los equipos buscan esta librería

Elige este componente timeline para Angular cuando necesites un indicador de progreso presentacional — onboarding, seguimiento de pedidos, roadmaps — con nodos personalizables y layouts vertical y horizontal.

Instalación

npm install ng-hub-ui-milestones

Ir a

Ideal para

  • flujos de onboarding
  • seguimiento de pedidos
  • roadmaps
  • pasos de un proceso

Sobre milestones

ng-hub-ui-milestones dispone una serie de pasos conectados por una línea, en vertical u horizontal. Cada nodo es totalmente personalizable — número, icono, avatar o cualquier marcado dentro del círculo, más contenido enriquecido a su lado — y cada color, tamaño y conector es una variable CSS, así que se re-temiza en tiempo de ejecución.

Guías de uso

Orientación

Dispón la línea de tiempo en vertical (la opción por defecto, ideal para asistentes y feeds de actividad) o en horizontal (pasos de progreso a lo largo de la parte superior de una página). Los nodos se numeran automáticamente en orden del DOM.

Ejemplos:
Línea de tiempo vertical

Línea de tiempo vertical

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.

Pasos de progreso horizontales

Pasos de progreso horizontales

Information

Account verified.

Shipping

Address confirmed.

Payment

In progress.

Review

Last step.

Estados de nodo

Cada `hub-milestone` lleva un `state` —complete, active, pending o error— que determina los colores del nodo y del conector. El input `label` renderiza el texto de fallback dentro del círculo.

Ejemplos:
Estados de nodo

Estados de nodo

Complete

A finished step.

Active

The current step, highlighted with a ring.

Error

Something needs attention here.

Pending

Not started yet.

Nodos personalizados y tematización

Proyecta cualquier contenido dentro del círculo con `<ng-template hubMilestoneNode>` (números, iconos, emoji, avatares), sobrescribe un nodo individual con `color`, o vuelve a tematizar toda la línea de tiempo mediante las variables CSS `--hub-milestone-*`.

Ejemplos:
Nodos personalizados y color por nodo

Nodos personalizados y color por nodo

Drafted

Article written and saved.

Reviewed

Approved by the editor.

Publishing

Going live across channels.

Promotion

Scheduled for next week.

Tematización con variables CSS

Tematización con variables CSS

Kickoff

Project scoped and approved.

Build

Core features shipped.

Launch

Rolling out to production.

Animación

Cuando el timeline entra en el viewport, completa su trazo de acento hasta el nodo activo — activado por defecto y configurable globalmente con `provideHubMilestones`. Añade `[pulse]` para que el nodo activo emita una onda suave. Ambas animaciones respetan `prefers-reduced-motion`.

Ejemplos:
Horizontal con pulso activo

Horizontal con pulso activo

Ordered

Payment received.

Packed

Ready to ship.

In transit

Out for delivery now.

Delivered

Arriving soon.

Características clave

Cambios recientes

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.

Librerías relacionadas

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