Spin 加载中
用于页面和区块的加载中状态,支持三种动画类型(点状、环形、菊花)、自定义颜色与尺寸、延迟显示、全屏加载等。
基础用法
默认三点弹跳动画,spinning 控制是否加载中。
三种类型
通过 type 切换动画风格:dot(三点弹跳)、ring(环形旋转)、spinner(菊花旋转)。
Ring
不同尺寸
提供 sm / md / lg 三种预设尺寸,也支持数字自定义。
自定义颜色
通过 color 自定义加载动画颜色。
加载提示文字
通过 tip 在加载动画下方显示文字说明。
请稍候
容器加载
将内容放在 Spin 内部,spinning 控制是否显示加载遮罩。
这里是一段示例内容,当加载状态开启时会被模糊遮罩覆盖。
关闭加载后可以正常交互,包括选中文字等操作。
延迟显示
设置 delay(ms) 避免加载状态闪烁,仅当 spinning 持续超过延迟时间后才显示。
快速切换不会触发加载动画(delay=500ms),只有在 500ms 后仍处于加载状态才会显示。
全屏加载
设置 fullscreen 以全屏遮罩方式展示加载状态。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
spinning | boolean | true | 是否处于加载中状态 |
type | 'dot' | 'ring' | 'spinner' | 'dot' | 动画类型 |
size | 'sm' | 'md' | 'lg' | number | 'md' | 尺寸,数字为像素值 |
color | string | — | 自定义颜色,优先级高于主题色 |
tip | string | — | 加载提示文字 |
delay | number | 0 | 延迟显示时间(ms),避免闪烁 |
fullscreen | boolean | false | 是否全屏显示 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 需要加载遮罩的内容区域 |