Spin 加载中

用于页面和区块的加载中状态,支持三种动画类型(点状、环形、菊花)、自定义颜色与尺寸、延迟显示、全屏加载等。

基础用法
默认三点弹跳动画,spinning 控制是否加载中。
三种类型
通过 type 切换动画风格:dot(三点弹跳)、ring(环形旋转)、spinner(菊花旋转)。
Dot
Ring
Spinner
不同尺寸
提供 sm / md / lg 三种预设尺寸,也支持数字自定义。
自定义颜色
通过 color 自定义加载动画颜色。
加载提示文字
通过 tip 在加载动画下方显示文字说明。
加载中...
请稍候
容器加载
将内容放在 Spin 内部,spinning 控制是否显示加载遮罩。
加载中...

这里是一段示例内容,当加载状态开启时会被模糊遮罩覆盖。

关闭加载后可以正常交互,包括选中文字等操作。

延迟显示
设置 delay(ms) 避免加载状态闪烁,仅当 spinning 持续超过延迟时间后才显示。

快速切换不会触发加载动画(delay=500ms),只有在 500ms 后仍处于加载状态才会显示。

全屏加载
设置 fullscreen 以全屏遮罩方式展示加载状态。
加载中...

Props

参数类型默认值说明
spinningbooleantrue是否处于加载中状态
type'dot' | 'ring' | 'spinner''dot'动画类型
size'sm' | 'md' | 'lg' | number'md'尺寸,数字为像素值
colorstring自定义颜色,优先级高于主题色
tipstring加载提示文字
delaynumber0延迟显示时间(ms),避免闪烁
fullscreenbooleanfalse是否全屏显示

Slots

插槽名说明
default需要加载遮罩的内容区域