Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.
The import and the props worth knowing about, in one place.
import { Progress7 } from "@/components/beste/piece/progress7";
<Progress7
value={72}
label="Hydration"
tone="sky"
/>Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
A row of pill segments fills left to right beside a live percentage, flashes a check at one hundred, holds for a beat, and starts over.