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
Medidores graduados
The caption beside each bar is plain text: it is not attached to the gauge, and a meter is named by its author alone. label is what a screen reader reads out — it renders nothing, so the demo looks the same with it and without it.
Indicadores de anillo
The projected caption is decoration, and so is the percentage in the middle: neither names a role="meter". label does, and it is the only way in — a ring used to announce itself as "92%", which says nothing about what was measured.
Tematización con el mixin y colores semánticos
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)