Pieces/Progress(18)

Progress pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Syncing library0%

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.

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.

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.

Clinic setup

3/5
Create your workspace
Import member records
Connect billing account
Invite your team
Publish booking page

Setup Checklist Card

An onboarding checklist with a completion bar, a done count, and steps that strike through as they are finished.

Level 121840 / 2500 XP

XP Level Bar

Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.

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.

Workspace storage
64 GB of 200 GB

Storage Quota

Drive icon beside a label, a thin usage bar, and a used-of-total caption that retints as it fills.

27Day streak
Longest: 42 days

Streak Counter

Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.

All setYour payment has cleared

Success Check

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

78%Load

Gauge

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

72%Hydration

Vertical Fill

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

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

Stacked Bar

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

Onboarding4 / 6

Segmented Progress

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

Thinking

Loading Dots

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

Deployment68%

Linear Progress

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

72%

Progress Ring

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

Account
Plan
3
Payment
4
Done

Timeline Steps

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

Markdown version