Skip to content
Feedback

Meter and ProgressRing

A level within a range, and circular progress.

import { Meter, ProgressRing, meterTone } from "@flinbu/seed";

Levels and rings

Credits used182 of 200
Token adoption94%
Storage4.1 of 10 GB
72%
94%
import { Meter, ProgressRing } from "@flinbu/seed";

<div className="flex w-full max-w-sm flex-col gap-base">
  <Meter label="Credits used" value={182} max={200} high={160} optimum={0} valueText="182 of 200" />
  <Meter label="Token adoption" value={94} low={60} high={90} optimum={100} />
  <Meter label="Storage" value={41} valueText="4.1 of 10 GB" />
  <div className="flex items-center gap-base">
    <ProgressRing value={40} size="sm" label="Importing" />
    <ProgressRing value={72} showValue label="Sync" />
    <ProgressRing value={94} size="lg" showValue tone="success" label="Health score" />
    <ProgressRing label="Loading" />
  </div>
</div>

Use it for

  • Credits used, adoption, storage; a health score; a sync.

Use something else for

  • Tasks that finish: use Progress.

Props

PropTypeDefaultDescription
value / min / maxnumber–The level.
low / high / optimumnumber–Colors it like HTML's meter.
tone'accent''success''warning''error''neutral'–Override.
valueTextstring–Shown and announced.
ProgressRing: size'sm''md''lg''xl''md'20, 40, 64 or 96px.

Accessibility

  • Meter has role meter with min, max, value and valuetext; color always comes with the number.