Charts
Liquid gauge
A round vessel of liquid light. The surface rolls gently; change the value and the level overshoots and sloshes before it settles. The number inverts where the liquid covers it.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidGauge } from '@vizzele/react';
<LiquidGauge label="Storage used" value={62} />
<LiquidGauge label="Battery" value={0.8} max={1} format={(v) => `${v * 100}%`} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value. |
max | number | 100 | Full vessel. |
label | string | — | What it measures (accessible name). |
size | number | 160 | Diameter (px). |
format | (value, max) => string | — | Text in the middle. |
Accessibility
- role="meter" with min, max, value and the same text you see as aria-valuetext.
- Animates only while on screen; with reduced motion the surface is still and the level simply moves.