Step Pipeline Loader
A free multi step loader React component with named stages and a controlled pipeline state.
Upload
Receive the source files.
CompletedProcess
Transcode and optimise.
In progressReview
Automated quality checks.
UpcomingPublish
Push to the live bucket.
Upcoming
Customise
Code
<LoaderStepPipeline
steps={[
{ id: "upload", label: "Upload", description: "Receive the source files." },
{ id: "process", label: "Process", description: "Transcode and optimise." },
{ id: "review", label: "Review", description: "Automated quality checks." },
{ id: "publish", label: "Publish", description: "Push to the live bucket." },
]}
label="Render pipeline"
current={1}
/>Step Pipeline Loader is a free multi step loader React component for Next.js and Tailwind that shows two to six named stages connected by a fill line. Pass your stages, a controlled zero-based current index and an overall state, and it renders which stages are complete, which one is active and which are still upcoming.
The connector and stage markers derive from one clamped index: complete marks every stage done, error marks the prior stages complete and the active one failed, and every other change animates only what changed instead of replaying the whole sequence. Reduced-motion visitors get every update instantly, and the active stage's pulse pauses whenever it is offscreen or the tab is hidden.
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-step-pipelineUsage
import { LoaderStepPipeline } from "@/components/loader-step-pipeline";
const steps = [
{ id: "upload", label: "Upload", description: "Receive the source files." },
{ id: "process", label: "Process", description: "Transcode and optimise." },
{ id: "review", label: "Review", description: "Automated quality checks." },
{ id: "publish", label: "Publish", description: "Push to the live bucket." },
];
export function RenderPipeline({ current }: { current: number }) {
return (
<LoaderStepPipeline
steps={steps}
current={current}
label="Render pipeline"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | ReadonlyArray<{ id: string; label: string; description?: string }> | required | Two to six named stages with unique ids, in pipeline order. |
| current | number | required | Controlled zero-based active stage. Clamped to the available range. |
| state | "running" | "complete" | "error" | "running" | Overall pipeline state. |
| orientation | "horizontal" | "vertical" | "horizontal" | Visual and connector orientation. |
| connectorDuration | number | 0.45 | Stage-fill seconds. Clamped to 0 through 1. |
| markerSize | number | 32 | Marker diameter in CSS pixels. Clamped to 24 through 48. |
| pulseCadence | number | 1.6 | Active-stage pulse seconds, clamped to 0.8 through 4. Zero disables the pulse. |
| radius | number | 20 | Pipeline shell radius in CSS pixels. Clamped to 0 through 40. |
| label | string | "Loading progress" | Accessible name for the status region and the stage list. |
| className | string | undefined | Additional classes merged onto the status wrapper. |
Customisation
Step Pipeline Loader exposes accent, track and error colour tokens. Override them on any ancestor to retheme the fill, markers and error state without touching the component's markup.
.render-pipeline {
--pipeline-loader-accent: var(--primary);
--pipeline-loader-track: var(--border);
--pipeline-loader-error: var(--destructive);
}Frequently asked questions
- Is Step Pipeline Loader free for commercial use?
- Yes. Step Pipeline Loader is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is this multi step loader accessible and reduced-motion safe?
- Yes. The wrapper exposes one status region with a concise summary that updates only when the controlled stage or state changes, and every stage renders in an accessible list with explicit completed, current, upcoming or failed text. Reduced motion applies every update instantly and disables the pulse and check-drawing animations.
- How do I customise Step Pipeline Loader?
- Pass connectorDuration, markerSize, pulseCadence and radius to tune the motion and geometry, override the pipeline-loader-accent, pipeline-loader-track and pipeline-loader-error CSS custom properties to retheme it, and use className for wrapper layout.