Wave Progress
Progress components that render as waves and dither fields
A progress bar is one of the least examined components in any design system. It fills from left to right, and that is usually where the thinking stops.
This asks what else a progress indicator could be: a braided wave, an ordered-dither field, a layered dither surface. The semantics stay identical — the renderer is the only thing that changes.
It installs as a source-owned shadcn registry component, so the code lands in your repository rather than behind a dependency.
Features
- Wave, dithered and layered dither renderers behind one API
- Determinate, indeterminate and milestone modes
- Radial variant and a sparkline for series data
- Offscreen instances pause their animation
- Reduced Motion honoured and tested
Live
Tech Stack
React
The only runtime dependency the installed component carries.
shadcn registry
Source-owned install: the files land in your repo and stay editable.
Playwright
End-to-end coverage across Chromium, Firefox and WebKit.
Challenges & Learnings
Keeping semantics while changing the picture
Every renderer keeps role="progressbar" and drops aria-valuenow only in indeterminate mode. A screen reader cannot tell which painter is active, and should not be able to.
Proving the cost instead of estimating it
Component JS is 7,834 bytes gzip and CSS 2,575, measured by a standing bundle audit. Fifty simultaneous instances hold a 120 FPS mean in a browser benchmark that hovers one instance while sampling.
Timeline
2026