Progreso, medidor y anillo para Angular | ng-hub-ui-metrics

Primitivas de métricas de solo lectura para Angular — una barra de progreso lineal, un medidor graduado y un indicador de anillo circular — gobernadas por tokens del sistema de diseño con semántica ARIA completa.

Última actualización 21 sept 2026

Visión General

Por qué los equipos buscan esta librería

Usa ng-hub-ui-metrics cuando tu aplicación Angular necesite visualizar un único valor —progreso de subida, capacidad, una puntuación o una valoración— sin recurrir a una librería de gráficos completa.

Instalación

npm install ng-hub-ui-metrics

Ir a

Ideal para

  • progreso de subidas y tareas
  • medidores de disco, memoria y capacidad
  • puntuaciones de calidad y valoraciones
  • anillos de KPI para paneles

Sobre metrics

ng-hub-ui-metrics es una pequeña familia de primitivas de presentación. `hub-progress` representa una barra lineal determinada o indeterminada; `hub-meter` gradúa un escalar respecto a una meseta `[low, high]` siguiendo la semántica de `<meter>` de HTML; `hub-ring` dibuja una puntuación normalizada como un arco SVG con un texto proyectado opcional. Ninguno de los componentes fija un color de forma rígida: leen las familias compartidas `--hub-sys-color-*` y exponen propiedades personalizadas `--hub-progress-*`, `--hub-meter-*` y `--hub-ring-*` para su tematización.

Guías de uso

Progreso lineal

Una barra de progreso determinada o indeterminada con una escala de tamaños, colores semánticos y una etiqueta de valor opcional.

Ejemplos:
Barras de progreso

Barras de progreso

Determinate progress with value labelsDocuments92%Images68%Videos34%Archives12%
Size scale
IndeterminateSyncing workspace

Medidor graduado

Un indicador que sigue la semántica de <meter> de HTML y se recolorea por banda en función de la meseta low/high y del punto óptimo.

Ejemplos:
Medidores graduados

Medidores graduados

The caption beside each bar is plain text: it is not attached to the gauge, and a meter is named by its author alone. label is what a screen reader reads out — it renders nothing, so the demo looks the same with it and without it.

Primary storage40% used
Media library90% used
Battery reserve10% left

Indicador de anillo circular

Un anillo SVG que representa una puntuación normalizada, con umbrales de color y un texto proyectado mediante <ng-content>.

Ejemplos:
Indicadores de anillo

Indicadores de anillo

The projected caption is decoration, and so is the percentage in the middle: neither names a role="meter". label does, and it is the only way in — a ring used to announce itself as "92%", which says nothing about what was measured.

92%Coverage
58%Performance
34%SEO
A+Custom caption

Tematización

Tiñe una primitiva con el input semántico `color` (asignado a las familias `--hub-sys-color-*` del ds), o recolorea las tres a la vez con el mixin SCSS `hub-metrics-theme()` de una sola llamada y las propiedades personalizadas `--hub-*`.

Ejemplos:
Tematización con el mixin y colores semánticos

Tematización con el mixin y colores semánticos

Semantic colours — the color input reads the design-system --hub-sys-color-* familiesprimary70%success70%warning70%danger70%neutral70%
Custom theme — one hub-metrics-theme() include retints all three primitives at once (see the CSS tab)
Coverage64%86%Score

Características clave

Cambios recientes

Version 22.4.2 - 9/21/26, 12:00 AM

fixed: hub-ring announces the value it actually draws. aria-valuenow was bound to the raw value while the arc paints the ratio clamped into 0..max, so a value past max drew a full ring and announced a number outside the range it was measured against.

Version 22.4.1 - 9/16/26, 12:00 AM

changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.

Version 22.4.0 - 9/8/26, 12:00 AM

changed: The three primitives keep their stylesheet to themselves. <hub-progress>, <hub-meter> and <hub-ring> shipped with ViewEncapsulation.None, which publishes every rule they emit into the application's global cascade, where it competes with rules the library never sees and cannot be removed by anyone who did not know it was there. None of the four reasons CODING_RULES.md allows for leaving encapsulation applied here: all three paint their own host and their own template and nothing else. The token defaults move from :where(.hub-progress) to :where(:host), which costs nothing because a custom property inherits, and the size and band modifiers, which ride on the host, are matched through :host(). Theming is untouched: the defaults stay at specificity zero and hub-metrics-theme() still emits its rules from your own sheet against the host element. See BREAKING_CHANGES.md for the one case that does change.

added: ng-hub-ui-ds is declared as an optional peer dependency (>=22.0.0). Every token in the three stylesheets has always resolved through the --hub-sys-* / --hub-ref-* ladder and the manifest said nothing about it, so a consumer reading the package on npm had no way to learn that installing the token package is what gives these primitives the family palette and its dark mode. It stays optional because it truly is: each token carries a literal fallback and the library renders without it.

Version 22.3.0 - 9/6/26, 12:00 AM

added: <hub-meter> and <hub-ring> accept a label input, mirroring <hub-progress>. An element with role=meter is named by its author alone: the meter renders no text of its own and the caption projected into the ring is not a name, so both primitives reached assistive technology unnamed and the ring could not even be named from outside. The input feeds aria-label through a host binding and is dropped when empty, so an outer aria-labelledby still applies; an aria-label written on the element itself does not, because the host binding owns the attribute and clears it whenever label is unset. See BREAKING_CHANGES.md.

added: FUNCTIONALITIES.md, the coverage table the rest of the family ships. Nothing stated which parts of the three primitives a live example actually demonstrates and which are only described in prose, so a reader had to open the docs site and infer it.

fixed: <hub-ring> no longer takes its accessible name from its own percentage. aria-label was hard-wired to the rounded value already carried by aria-valuetext, which announced the number twice and overwrote any name written on the element. The name now comes from the new label input, and the percentage stays in aria-valuetext.

fixed: <hub-ring> size and thickness no longer shadow their own tokens. Both defaulted to a concrete length written inline as a custom property on every render, so --hub-ring-size and --hub-ring-thickness, advertised as themeable by the README, the CSS reference and the ds token spec, could only be overridden with !important, and not even the hub-metrics-theme() mixin reached them. The inputs now default to undefined (their type widens accordingly) and the inline declaration is dropped when unset, leaving the stylesheet in charge with 4rem and var(--hub-ref-space-2, 0.5rem), the same values as before. Same shape as the 22.0.1 fix for the color input of <hub-progress>.

fixed: The README no longer advertises zero external dependencies. ng-hub-ui-utils has been a required peer since 22.2.0, because <hub-progress> imports resolveHubAccent from it, so anyone who followed the Quick Start installed a tree that cannot resolve. Both READMEs now state the dependency and the install command names it.

fixed: The <hub-progress> token table lists --hub-progress-accent. It is the root slot written by the color input and by the $accent of the mixin, and the one every other progress token derives from, yet it was the single token the table left out, so a theme author reading only the README could not see what to override.

fixed: HubRingThresholds.low described itself as inclusive (at or below) while the component treats a value equal to low as neutral. The JSDoc ships in the .d.ts, so the wrong sentence is what a consumer reads in their editor.

Version 22.2.4 - 9/1/26, 12:00 AM

changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.

Version 22.2.3 - 8/17/26, 12:00 AM

fixed: The published package declared no licence. An absent license field is not neutral — a registry reports it as unlicensed, which legally reads as all rights reserved, the most restrictive state possible rather than the most open. The intent was always MIT; it is now stated in package.json and carried in a LICENSE file that ships with the package.

Version 22.2.2 - 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.2.1 - 7/28/26, 12:00 AM

fixed: The package could not be published: tsconfig.lib.prod.json was missing "compilationMode": "partial", so production builds emitted full Ivy output, which npm publishing rejects. 22.2.0 never reached the registry; this release carries the 22.2.0 changes (canonical resolveHubAccent from ng-hub-ui-utils) plus the build fix.

Version 22.2.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 (used by <hub-progress>) 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 get it automatically; manual installs need npm i ng-hub-ui-utils.

Version 22.1.0 - 7/7/26, 12:00 AM

changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-metrics/styles. The theme mixin now builds to dist/metrics/styles/... (was dist/metrics/src/lib/styles/...), so @use 'ng-hub-ui-metrics/styles' resolves. Update any @use that reached into src/lib/styles.

changed: <hub-progress> color accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent resolver (a local copy of the canonical ng-hub-ui-utils helper): a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. The single --hub-<comp>-accent slot derives the rest of the family, so built-in colours are unchanged.

changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component/directive metadata (Angular style guide). No public API or behaviour change.

Version 22.0.1 - 7/6/26, 12:00 AM

fixed: Wrapper / mixin theming now actually retints the primitives. Each component declares its token defaults on its own element (:where(.hub-progress) / :where(.hub-meter) / :where(.hub-ring)), and a custom property set on the element wins over one inherited from an ancestor — so a bare .wrapper { --hub-*: … } override, and the hub-metrics-theme() mixin that emitted such overrides, had no effect. The mixin now emits its token overrides ON the metrics elements as descendants of the include scope (<scope> :where(.hub-progress, .hub-meter, .hub-ring)), which beats the per-element defaults and reaches the components.

fixed: <hub-ring> host role corrected to meter (was img, which does not expose the aria-valuemin / -valuemax / -valuenow / -valuetext attributes the component sets).

changed: <hub-progress> color input is now optional (HubMetricsColor | undefined, default undefined). When set it is applied inline as a per-instance override; when omitted the accent falls back to the --hub-progress-accent token so a theme (mixin / token override) can drive it. The rendered default is unchanged (primary).

added: docs/css-variables-reference.md — complete CSS custom-property reference for <hub-progress>, <hub-meter> and <hub-ring>, with the theming guidance above.

Version 22.0.0 - 7/5/26, 12:00 AM

added: HubProgressComponent: a determinate/indeterminate linear progress bar with a size scale, semantic colours and an optional value label.

added: HubMeterComponent: a graded gauge following HTML <meter> semantics that selects its fill band from the low/high plateau and the optimum point.

added: HubRingComponent: a circular SVG ring gauge with colour thresholds, a projected centre caption and exportAs "hubGauge".

added: CSS-variable theming surface (--hub-progress-*, --hub-meter-*, --hub-ring-*) mapped onto the shared --hub-sys-color-* token families.

Preguntas frecuentes

¿Cómo se muestra una barra de progreso en Angular?

Instala ng-hub-ui-metrics junto con ng-hub-ui-utils, que es un peer obligatorio, e importa HubProgressComponent. Con eso, <hub-progress [value]="72" label="Upload" showValue /> pinta la barra: max vale 100 por defecto, el host lleva role=progressbar con aria-valuenow, y label da a la vez el rótulo visible y el nombre accesible. Pon indeterminate cuando no se sepa la duración, lo que quita aria-valuenow y marca el host como aria-busy.

¿Qué diferencia hay entre hub-progress, hub-meter y hub-ring?

hub-progress es una barra lineal para un trabajo que avanza hacia su final, y es el único de los tres con estado indeterminate y con input color. hub-meter es una lectura dentro de un rango, con low, high y optimum marcando las bandas, así que anuncia role=meter y un aria-valuetext que nombra la banda. hub-ring dibuja la misma idea como un arco circular con umbrales opcionales, y es el único que proyecta un rótulo tuyo. Ojo con los valores por defecto: max es 100 en progress pero 1 en meter y en ring, y showValue empieza apagado en progress y encendido en ring.

¿Cómo se cambia el color de una barra de progreso o de un indicador en Angular?

hub-progress tiene un input color con primary, secondary, success, danger, warning, info y neutral. hub-meter y hub-ring no tienen ningún input de color: se recolorean con las propiedades personalizadas --hub-progress-*, --hub-meter-* y --hub-ring-*, o de una vez con el mixin de Sass hub-metrics-theme(). Todos los tokens recurren a un valor literal, así que ng-hub-ui-ds es opcional y los componentes se pintan con él o sin él.

¿Recoge analítica o dibuja gráficos ng-hub-ui-metrics?

No, ni una cosa ni la otra. Trae tres elementos de solo lectura que pintan los números que les des, y no mide nada, no guarda nada y no envía nada a ninguna parte. No hay gráfico, ni sparkline, ni tarjeta de KPI, ni contador animado, y tampoco hay debajo ninguna dependencia de gráficos: el anillo es SVG escrito a mano. Si necesitas una serie representada, este no es el paquete.