Multi Step Loader

A step loader for screens that works with async conditions too.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/multi-step-loader.json"

复制并粘贴以下代码：

MultiStepLoader.vue

Prop 名称	类型	默认值	描述
`loading`	`boolean`	`false`	Controls the visibility of the loader. When `true`, the loader is displayed.
`steps`	`Step[]`	`[]`	Array of step objects defining the loading sequence.
`defaultDuration`	`number`	`1500`	The duration of each step in milliseconds.
`preventClose`	`boolean`	`false`	If `true`, the close button will not be shown.

Event Name	Payload Type	描述
`state-change`	`number`	Emitted when the current step changes, providing the new step index.
`complete`	`void`	Emitted when all steps have been completed.
`close`	`void`	Emitted when the loader is closed by button.

本页