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.

Playground

Examples

<cg-meter value="72" low="20" high="80" optimum="50" label="CPU usage" show-value style="max-width:300px;"></cg-meter>

<cg-meter variant="circular" value="85" label="Battery" show-value size="lg"></cg-meter>

<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