Progreso, medidor y anillo para Angular | ng-hub-ui-metrics

Primitivas de métricas de solo lectura para Angular — una barra de progreso lineal, un medidor graduado y un indicador de anillo circular — gobernadas por tokens del sistema de diseño con semántica ARIA completa.

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Barras de progreso

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

Medidores graduados

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

Indicadores de anillo

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

Tematización con el mixin y colores semánticos

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