Angular Progress, Meter & Ring Metrics | 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.

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-metrics

Jump 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

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

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

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

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

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

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

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

Key features

Recent changes

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.

Related libraries

ng-hub-ui-skeleton ng-hub-ui-badges ng-hub-ui-stepper