KQ-531 · TRANSFER/BAR
Transfer Bar
A transfer progress bar that stays honest at the end: the fill runs linear to 90% and then approaches the finish asymptotically, so the last percent belongs to the transfer rather than to the animation, while a stripe rides the fill and the rate and remaining-time readouts roll on snap. Done stamps a check on recoil and folds the body away on glide to a one-line summary whose height is measured rather than reserved; error tints warn, stops the stripe and offers Retry. The track is a progressbar carrying aria-valuetext, Retry is a real button in the tab order, and under reduced motion the stripe never runs while the fill still fills.
Fernworks · 0 of 3 · ready
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/transfer-bar
Props
- progress
- number
- default —
- 0–1. Clamped, and compressed past 90% so the fill cannot claim a finish the transfer has not reached.
- status
- "active" | "done" | "error"
- default "active"
- Active runs the stripe, done stamps and folds, error tints warn and offers Retry.
- bytes
- { done: number; total: number }
- default —
- Feeds the byte, rate and remaining-time readouts; the rate is sampled on its own clock and smoothed.
- label
- string
- default —
- File name. Truncates with a title attribute and labels the progressbar.
- onRetry
- () => void
- default —
- Fires from the Retry button in the error state.
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | — | 0–1. Clamped, and compressed past 90% so the fill cannot claim a finish the transfer has not reached. |
| status | "active" | "done" | "error" | "active" | Active runs the stripe, done stamps and folds, error tints warn and offers Retry. |
| bytes | { done: number; total: number } | — | Feeds the byte, rate and remaining-time readouts; the rate is sampled on its own clock and smoothed. |
| label | string | — | File name. Truncates with a title attribute and labels the progressbar. |
| onRetry | () => void | — | Fires from the Retry button in the error state. |