Angular Progress-, Meter- & Ring-Metriken | ng-hub-ui-metrics

Schreibgeschützte Angular-Metrik-Primitive — ein linearer Fortschrittsbalken, ein abgestufter Meter und eine kreisförmige Ringanzeige —, angetrieben von Design-System-Token mit vollständiger ARIA-Semantik.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Fortschrittsbalken

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

Abgestufte Meter

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

Ringanzeigen

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

Theming mit dem Mixin und semantischen Farben

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