Gauge
A radial gauge — one number against the range it lives in.
Try it
0 CPU
Knobs
tone size <script> import { Gauge } from 'omaris';</script><Gauge value={72} label="CPU" />Walkthrough
1. Basic
One number against the range it lives in. label goes under the readout.
0 CPU
0 Memory
0 Disk
<script lang="ts"> import { Gauge } from 'omaris';</script><Gauge value={72} label="CPU" /><Gauge value={38} label="Memory" tone="info" /><Gauge value={94} label="Disk" tone="destructive" />2. Segments and ticks
segments paint zones on the track — a red band past 80% — without touching the indicator, so the reading and the scale stay separate things. ticks marks the scale, and format writes the number in the middle.
0 Load
0 of 2,000
<script lang="ts"> import { Gauge, latn } from 'omaris';</script><Gauge value={86} label="Load" tone="warning" ticks={9} segments={[ { from: 0, to: 60, tone: 'success' }, { from: 60, to: 80, tone: 'warning' }, { from: 80, tone: 'destructive' } ]}/><Gauge value={1420} max={2000} label="of 2,000" tone="tertiary" format={(v) => Math.round(v).toLocaleString(undefined, latn())}/>3. Sizes and sweep
sweep is degrees of arc: 270 is the classic dial, 360 closes it into a ring. thickness is a share of the radius, so it holds at every size.
0 sm
0 md
0 lg
<script lang="ts"> import { Gauge, Text } from 'omaris';</script><div class="flex flex-wrap items-end justify-center gap-8"> <div class="flex flex-col items-center gap-2"> <Gauge value={64} size="sm" label="sm" /> <Text variant="label-sm" tone="muted" font="mono">sweep 270</Text> </div> <div class="flex flex-col items-center gap-2"> <Gauge value={64} size="md" sweep={360} rounded={false} label="md" /> <Text variant="label-sm" tone="muted" font="mono">sweep 360</Text> </div> <div class="flex flex-col items-center gap-2"> <Gauge value={64} size="lg" sweep={180} thickness={0.32} label="lg" tone="secondary" /> <Text variant="label-sm" tone="muted" font="mono">sweep 180</Text> </div></div>4. Animated
A new value glides in on the emphasized curve, and the number counts with the arc — both driven by one tween, so they stop together. animate={false} makes it jump; a number sets the duration.
0 Throughput
0% Ring
<script lang="ts"> import { Button, Gauge, SegmentedButton } from 'omaris'; let value = $state(64); let mode = $state('smooth'); const animate = $derived(mode === 'instant' ? false : mode === 'slow' ? 1600 : true); const bump = () => (value = Math.round(5 + Math.random() * 90));</script><div class="flex flex-col items-center gap-4"> <div class="flex flex-wrap items-center justify-center gap-6"> <Gauge {value} {animate} label="Throughput" tone={value > 80 ? 'warning' : 'primary'} /> <Gauge {value} {animate} label="Ring" sweep={360} thickness={0.14} tone="tertiary" format={(v) => `${Math.round(v)}%`} /> </div> <div class="flex flex-wrap items-center justify-center gap-3"> <SegmentedButton bind:value={mode} size="sm" label="Animation" items={[ { value: 'smooth', label: 'Smooth' }, { value: 'slow', label: 'Slow' }, { value: 'instant', label: 'Instant' } ]} /> <Button size="sm" variant="tonal" onclick={bump}>New reading</Button> </div></div>