Components / Meter
Meter
Measurement gauge with threshold coloring, linear and circular variants, and show-value option. Different from progress-bar: meter = measurement within a range, progress = task completion.
data-display v0.9.0
Playground
Examples
Linear with thresholds
<cg-meter value="72" low="20" high="80" optimum="50" label="CPU usage" show-value style="max-width:300px;"></cg-meter>Circular
<cg-meter variant="circular" value="85" label="Battery" show-value size="lg"></cg-meter>Warning zone
<cg-meter value="15" low="20" high="80" label="Disk space" show-value style="max-width:300px;"></cg-meter>Import
import { CgMeter } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-meter';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
low | number | null | Low threshold |
high | number | null | High threshold |
optimum | number | null | Optimum value |
label | string | "" | Accessible label |
variant | "linear" | "circular" | "linear" | Display variant |
size | "sm" | "md" | "lg" | "md" | Size variant |
show-value | boolean | false | Show percentage value |