Angular Progress, Meter & Ring | ng-hub-ui-metrics
Read-only Angular metric primitives — a linear progress bar, a graded meter and a circular ring gauge — driven by design-system tokens with full ARIA semantics.
Last updated Aug 17, 2026
Overview
Why teams search for this library
Use ng-hub-ui-metrics when your Angular application needs to visualize a single value — upload progress, capacity, a score or a rating — without pulling in a full charting library.
Install
npm install ng-hub-ui-metricsJump to
Ideal for
- upload and task progress
- disk, memory and capacity meters
- quality scores and ratings
- dashboard KPI rings
About metrics
ng-hub-ui-metrics is a small family of presentational primitives. `hub-progress` renders a determinate or indeterminate linear bar; `hub-meter` grades a scalar against a `[low, high]` plateau following HTML `<meter>` semantics; `hub-ring` draws a normalized score as an SVG arc with an optional projected caption. None of the components hard-code a colour — they read the shared `--hub-sys-color-*` families and expose `--hub-progress-*`, `--hub-meter-*` and `--hub-ring-*` custom properties for theming.
Feature guides
Linear progress
A determinate or indeterminate progress bar with a size scale, semantic colours and an optional value label.
Examples:
Progress bars
Progress bars
Graded meter
A gauge following HTML <meter> semantics that recolours itself by band relative to the low/high plateau and the optimum point.
Examples:
Graded meters
Graded meters
Circular ring gauge
An SVG ring rendering a normalized score, with colour thresholds and a caption projected through <ng-content>.
Examples:
Ring gauges
Ring gauges
Theming
Tint one primitive with the semantic `color` input (mapped to the ds `--hub-sys-color-*` families), or retint all three at once with the one-call `hub-metrics-theme()` SCSS mixin and the `--hub-*` custom properties.
Examples:
Theming with the mixin & semantic colours
Theming with the mixin & semantic colours
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)Key features
Recent changes
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-installer 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.