Success Check

All setYour payment has cleared
About this piece

Success Check

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

Usage

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

import { Progress9 } from "@/components/beste/piece/progress9";

<Progress9
  title="All set"
  description="Your payment has cleared"
/>

More Progress pieces

View all Progress
Account
Plan
3
Payment
4
Done

Timeline Steps

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

72%

Progress Ring

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

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

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.

Deployment68%

Linear Progress

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

Thinking

Loading Dots

Three staggered pulsing dots inside a pill, paired with an optional label.

5
68%
4
22%
3
6%
2
3%
1
1%

Rating Distribution

Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.