Data

CircularProgress

A ring for a bounded quantity — context window, quota, upload — whose tone follows the number.

CircularProgress

import { CircularProgress } from '@anomalia/ui';

Notes

Past warnAt the ring turns warning, past dangerAt danger. A context meter that stays one colour at 95% has told the user nothing they could not already read.
Without a value it spins a fixed arc instead of filling to an invented number — a ring that pretends to know its progress is worse than one that admits it does not.
Two SVG circles and stroke-dasharray: scales to any size, no canvas, and the centre is a snippet so it can hold an icon, a fraction or nothing at all.

Examples

Context

The ring changes tone as it fills: accent below 75%, warning past it, danger past 90%. A context meter that stays one colour at 95% has told the user nothing they could not already read.

38%

82%

96%

64%

Context window

76,000 / 200,000 tokens

API

Prop	Type	Default	Description
`value`	`number \| null`	`null`	0–100; `null` is indeterminate.
`size / thickness`	`number`	`64 / 6`	Diameter and ring width, in px.
`warnAt / dangerAt`	`number`	`75 / 90`	Tone thresholds.
`tone`	`Tone \| null`	`null`	Pin a tone and ignore the thresholds.
`showValue / children`	`boolean / Snippet`	`true`	Percentage in the middle, or your own content.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.