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.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Progress bars

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

Graded meters

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

Ring gauges

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

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