Three staggered pulsing dots inside a pill, paired with an optional label.
The import and the props worth knowing about, in one place.
import { Progress4 } from "@/components/beste/piece/progress4";
<Progress4
surface="card"
bordered={true}
inverted={false}
label="Thinking"
tone="primary"
/>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.
Numbered step dots connected by a line. Completed steps fill emerald with a check.
Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.