Buffered Progress
A free React progress bar with a prepared frontier behind completed work.
Autumn collection
Preparing product photography
Customise
Code
<LoaderBufferedProgress
label="Uploading product images"
value={64}
buffered={82}
/>Buffered Progress is a free React progress bar component for Next.js and Tailwind projects. It shows completed work and the work prepared next on one clear track, for uploads, image processing, downloads or any task where preparation can run ahead of completion.
The component clamps both controlled values, keeps the prepared frontier at or ahead of completion, and exposes the completed value through progressbar semantics. Interrupted updates retarget both transforms together; reduced-motion users see each new value immediately.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/loader-buffered-progressUsage
import { LoaderBufferedProgress } from "@/components/loader-buffered-progress";
export function UploadProgress({ value, buffered }: { value: number; buffered: number }) {
return (
<LoaderBufferedProgress
value={value}
buffered={buffered}
label="Uploading product images"
valueText="128 of 200 images"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Completed progress. Finite values clamp to 0–100; non-finite values become 0. |
| buffered | number | required | Prepared progress. It clamps to 0–100 and is raised to `value` when it would fall behind. |
| label | string | required | Accessible name describing the task. |
| valueText | string | undefined | Optional visible and spoken value text, such as `128 of 200 images`; also supplies `aria-valuetext`. |
| className | string | undefined | Additional classes merged onto the progressbar wrapper. |
Customisation
Buffered Progress exposes semantic tokens for its track, completed fill, prepared fill and height. Both frontiers animate with transform only, so theme changes do not add layout work to progress updates.
.upload-progress {
--loader-buffered-progress-track: var(--muted);
--loader-buffered-progress-fill: var(--primary);
--loader-buffered-progress-buffer: var(--ring);
--loader-buffered-progress-height: 0.75rem;
}Frequently asked questions
- Is Buffered Progress free for commercial use?
- Yes. Buffered Progress is MIT licensed with the Commons Clause; see the included license for the exact terms.
- Can I customize the colors and height?
- Yes. Set the `--loader-buffered-progress-track`, `--loader-buffered-progress-fill`, `--loader-buffered-progress-buffer` and `--loader-buffered-progress-height` CSS variables, or pass a `className` for additional wrapper styles.
- Does it preserve the prepared frontier and respect reduced motion?
- Yes. Values are normalized so the prepared frontier stays at or ahead of completed progress, even if the supplied value is invalid or lower. Updates are immediate when reduced motion is enabled.