Skip to main content

​
Overview

Multi Step Loader is a loading component that displays sequential steps with async support. Perfect for onboarding flows, loading sequences, or multi-step processes.

​
Usage

<template>
  <MultiStepLoader
    :loading="isLoading"
    :steps="steps"
    :defaultDuration="1500"
    :preventClose="false"
    @state-change="handleStateChange"
    @complete="handleComplete"
    @close="handleClose"
  />
</template>

<script setup>
const steps = [
  { text: 'Loading data...' },
  { text: 'Processing...' },
  { text: 'Complete!' }
]
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
loadingbooleanfalseControls the visibility of the loader. When true, the loader is displayed.
stepsStep[][]Array of step objects defining the loading sequence.
defaultDurationnumber1500The duration of each step in milliseconds.
preventClosebooleanfalseIf true, the close button will not be shown.

​
Events

Event NamePayload TypeDescription
state-changenumberEmitted when the current step changes, providing the new step index.
completevoidEmitted when all steps have been completed.
closevoidEmitted when the loader is closed by button.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us