Метрики Angular: Progress, Meter и Ring | 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