Métriques Angular Progress, Meter et Ring | ng-hub-ui-metrics

Primitives de métriques Angular en lecture seule — une barre de progression linéaire, une jauge graduée et une jauge circulaire en anneau — pilotées par les tokens du design-system avec une sémantique ARIA complète.

Exemples interactifs

Explorez des exemples en direct qui montrent comment la bibliothèque se comporte dans les cas d’usage Angular courants.

Barres de progression

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

Jauges graduées

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

Jauges en anneau

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

Thématisation avec le mixin et les couleurs sémantiques

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