Ring Fill

Storage used
0%
82 GB of 100 GB, upgrade before Friday
About this piece

Ring Fill

Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.

Usage

The import and the props worth knowing about, in one place.

import { Progress17 } from "@/components/beste/piece/progress17";

<Progress17
  value={82}
  label="Storage used"
  caption="82 GB of 100 GB, upgrade before Friday"
  tone="emerald"
/>

More Progress pieces

View all Progress
72%

Progress Ring

Circular SVG ring with a centered percentage. Tone sets the stroke color.

Deployment68%

Linear Progress

Labelled progress bar with a percent readout above and a tonal fill.

72%Hydration

Vertical Fill

Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.

All setYour payment has cleared

Success Check

Emerald filled circle with a bold check inside, a soft pinging ring, and a title plus description beneath.

Account
Plan
3
Payment
4
Done

Timeline Steps

Numbered step dots connected by a line. Completed steps fill emerald with a check.

78%Load

Gauge

Half-circle speedometer arc with a centered value, unit, and caption.