Multi Step Loader

Full-screen overlay that ticks through a list of steps, keeping the active one centred.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/multi-step-loader.json

Adds components/velora/multi-step-loader.tsx.

A deploy card opens the loader; onComplete closes it and marks the site live.

main · 3 commits ahead

Preview

Ship the latest changes to production.

Prop	Type	Default
`loading*` Show the overlay	`boolean`	`—`
`steps*` Steps, in order	`LoaderStep[]`	`—`
`current` Active step index (steps.length = all done); omit to auto-advance	`number`	`—`
`duration` Milliseconds per step when auto-advancing	`number`	`1600`
`loop` Start again after the last step instead of finishing	`boolean`	`false`
`title` Visible heading, also the dialog's accessible name	`string`	`—`
`onComplete` Called one `duration` after every auto-advanced step is done	`() => void`	`—`
`onClose` Renders a close button and lets Escape dismiss the overlay	`() => void`	`—`

Also accepts every <dialog> attribute, forwarded to the root element.

interface LoaderStep {
  /** What is happening during this step */
  text: string;
}

Reduced motion: The list jumps to the active step instead of scrolling, the spinner stands still and the overlay appears without a fade; steps still advance on schedule.
Keyboard: Built on a modal <dialog>: focus moves into it on open, Tab stays inside, and focus returns to the trigger on close. With onClose, Escape and a Close button dismiss it; a looping loader pauses while hovered or while its Close button has focus.
Screen readers: A polite live region announces each change ("Step 2 of 5: Installing dependencies"); the steps are an ordered list with aria-current="step" on the active one and completed steps marked done.