Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics

只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

进度条

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

分级计量表

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

环形仪表

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

使用 mixin 和语义颜色进行主题化

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