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