Skeleton Loader

About this piece

Skeleton Loader

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

Usage

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

import { Progress12 } from "@/components/beste/piece/progress12";

<Progress12
  lines={3}
  withAvatar={true}
/>

More Progress pieces

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

Thinking

Loading Dots

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

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.

27Day streak
Longest: 42 days

Streak Counter

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

Level 121840 / 2500 XP

XP Level Bar

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

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

Stacked Bar

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