Segment Loader

Syncing library0%
About this piece

Segment Loader

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.

Usage

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

import { Progress18 } from "@/components/beste/piece/progress18";

<Progress18
  label="Syncing library"
  doneLabel="Library synced"
  segments={10}
  tone="sky"
/>

More Progress pieces

View all Progress
Thinking

Loading Dots

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

Onboarding4 / 6

Segmented Progress

Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.

Deployment68%

Linear Progress

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

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

Stacked Bar

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

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.

Skeleton Loader

Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.