Gauge

78%Load
About this piece

Gauge

Half-circle speedometer arc with a centered value, unit, and caption.

Usage

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

import { Progress8 } from "@/components/beste/piece/progress8";

<Progress8
  value={78}
  label="Load"
  unit="%"
  tone="emerald"
/>

More Progress pieces

View all Progress
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.

Migration

Export
Map fields
3
Review
4
Go live

Review finishes today, go live is scheduled for Friday.

Horizontal Step Tracker

A horizontal progress card with numbered nodes joined by connectors, marking finished, current, and upcoming steps.

Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%

Stacked Bar

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

72%Hydration

Vertical Fill

Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.