Labelled progress bar with a percent readout above and a tonal fill.
The import and the props worth knowing about, in one place.
import { Progress3 } from "@/components/beste/piece/progress3";
<Progress3
value={68}
label="Deployment"
tone="success"
/>Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.
Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.