Angular Progress, Meter и Ring | ng-hub-ui-metrics
Примитивы метрик Angular только для чтения — линейный индикатор прогресса, градуированный измеритель и круговой кольцевой измеритель — управляемые токенами дизайн-системы с полной семантикой ARIA.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Индикаторы прогресса
Градуированные измерители
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.
Кольцевые измерители
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.
Оформление через mixin и семантические цвета
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)