MultiStepLoader
A step-based loading indicator with smooth transitions between steps.
Loading...
Basic Usage
import { MultiStepLoader } from "@corew500/ui"
const steps = [
{ label: "Connecting..." },
{ label: "Authenticating..." },
{ label: "Loading data..." },
{ label: "Complete!" },
]
<MultiStepLoader steps={steps} loading currentStep={1} />Controlled Progress
const [currentStep, setCurrentStep] = useState(0)
<MultiStepLoader
steps={steps}
loading={isLoading}
currentStep={currentStep}
onComplete={() => console.log("Done!")}
/>With Loop
Automatically restart from the beginning:
<MultiStepLoader steps={steps} loading loop />Variants
// Default - shows all steps with progress
<MultiStepLoader variant="default" steps={steps} loading />
// Compact - smaller, inline display
<MultiStepLoader variant="compact" steps={steps} loading />
// Minimal - just the current step text
<MultiStepLoader variant="minimal" steps={steps} loading />Custom Step Icons
const stepsWithIcons = [
{ label: "Uploading", icon: <Upload className="size-4" /> },
{ label: "Processing", icon: <Cog className="size-4" /> },
{ label: "Complete", icon: <Check className="size-4" /> },
]
<MultiStepLoader steps={stepsWithIcons} loading />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | LoaderStep[] | — | Array of steps to display |
| currentStep* | number | — | Current step index (0-based) |
| loading | enum | true | Whether the loader is active |
| loop | enum | false | Whether to loop back to the first step after completing |
| onComplete | () => void | — | Callback when all steps are completed |
| stepDuration | number | — | Duration to show each step when auto-advancing (ms) |
| variant | enum | default | — |
| size | enum | default | — |
LoaderStep Type
interface LoaderStep {
label: string
icon?: React.ReactNode
}Design Tokens
| Token | Description |
|-------|-------------|
| --loader-step-size | Step indicator size |
| --loader-step-gap | Gap between steps |
| --loader-transition-duration | Animation timing |