Linear Progress

Deployment68%
About this piece

Linear Progress

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

Usage

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"
/>

More Progress pieces

View all Progress
72%Hydration
Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%
72%
Onboarding4 / 6
Storage used
0%
5
68%
4
22%
3
6%
2
3%
1
1%