Multi-Step Loader
Step-by-step loading animation that shows progress through multiple labeled stages.
Preview
Multi-Step Loader
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
AI processing flows, file uploads, and multi-step operations.
Why this component matters
Named loading steps reduce perceived wait time by giving users context about what is happening.
Usage guidance
Use for operations with 3-6 distinct steps. Each step should have a clear label. Animate the checkmark on completion. Include a progress indicator.
Installation
bash
npx shadcn@latest add @aceternity/multi-step-loaderUsage
example.tsxtsx
import { MultiStepLoader } from "@/components/ui/multi-step-loader";
export default function Example() {
return (
<MultiStepLoader>
{/* Your content here */}
</MultiStepLoader>
);
}Source
multi-step-loader.tsx
components/ui/multi-step-loader.tsx