minimal-progress

A minimal, beautifully animated progress bar for React. Smooth transitions and spring physics. Zero opinions on color.

pnpm add minimal-progress

Quick Start

App.tsx

1import { ProgressBar } from "minimal-progress";
2
3function App() {
4  const [progress, setProgress] = useState(0);
5
6  return <ProgressBar value={progress} />;
7}

Components

Drag the slider to control all demos below.

65%

ProgressBar

Continuous line. GPU-accelerated scaleX.

1<ProgressBar value={65} />

ProgressPills

Segmented vertical slits that fill left to right.

1<ProgressPills value={65} segments={40} />

ProgressDots

Dots that scale up and darken as progress fills.

1<ProgressDots value={65} dots={16} />

ProgressWave

Audio-waveform style. Bars with random heights that rise as they fill.

1<ProgressWave value={65} bars={32} />

ProgressBlocks

Grid of small squares that fill in sequence.

1<ProgressBlocks value={65} columns={15} rows={2} />

ProgressRing

Minimal circular arc. Just a stroke on a track.

1<ProgressRing value={65} size={64} />