Loading 加载中

六种加载动画。可作为包裹遮罩、全屏遮罩，或独立使用。

六种动画

spinner

dots

pulse

bars

ring

wave

<SrLoading type="spinner" />
<SrLoading type="dots" />
<SrLoading type="pulse" />
<SrLoading type="bars" />
<SrLoading type="ring" />
<SrLoading type="wave" />

类型	视觉
spinner	旋转的圆弧（默认）
dots	三点跳动
pulse	扩散的圆环
bars	柱状起伏
ring	旋转的环
wave	波纹

默认 spinner 是够用的——提供多种只是为了让不同产品能挑到符合调性的一个。 同一产品内应统一使用一种，混用会让界面显得零碎。

包裹模式

loading 为真时，在默认插槽内容之上盖一层遮罩。

被包裹的内容。

加载期间会被半透明遮罩盖住，且不可交互。

加载中…

<SrLoading :loading="loading" text="加载中…">
  <div>内容</div>
</SrLoading>

遮罩会拦截点击——加载期间的重复点击是常见的 bug 来源， 用遮罩挡住比在业务代码里逐个判断要可靠。

延迟显示

delay 是"多久之后才显示"，默认 200ms。

立即显示

3 秒后才显示（现在看不到）

<SrLoading :loading="loading" :delay="200" />
<SrLoading :loading="loading" :delay="0" />

延迟显示是为了防"闪烁"

请求通常几十毫秒就返回。若不延迟，加载动画会一闪而过—— 这种闪烁比不显示更让人分神，看起来像界面出错了。

200ms 是经验值：比感知阈值（约 100ms）略长， 又短到本地缓存命中时不会显示。

但 delay 不是让动画迟到的理由——它是防闪烁的， 不是"故意晚点显示"。网络慢的场景下，延迟值越小体验越好。

全屏

fullscreen 铺满视口。

<SrLoading v-if="loading" fullscreen text="正在处理…" />

全屏加载要有退出路径

若无 clickThrough，遮罩会拦截所有点击，用户会被困住。

两种情况要留意：

1. 请求失败但忘了把 loading 置回 false —— 用户看到永远转圈；
2. 请求耗时很长 —— 用户无法取消。

建议：全屏加载都配上超时兜底，或允许点击关闭。

点击穿透

clickThrough 让遮罩不拦截点击（视觉上仍然有遮罩）。

<SrLoading :loading="loading" click-through />

用于"内容还能操作，只是提示正在后台刷新"这类场景。

尺寸与文字

正在加载数据

<SrLoading size="sm" />
<SrLoading :size="48" />           <!-- 自定义像素尺寸 -->
<SrLoading text="加载中" vertical />
<SrLoading text="加载中" :vertical="false" />  <!-- 文字在右侧 -->

颜色

默认继承 currentColor。需要显式指定时用 color。

<SrLoading :color="'var(--sr-color-primary)'" />
<SrLoading color="#2bb673" />

Props

名称	类型	默认值	说明
type	'spinner' | 'dots' | 'pulse' | 'bars' | 'ring' | 'wave'	'spinner'	动画类型
size	'sm' | 'md' | 'lg' | number	'md'	尺寸，数字按 px
color	string	—	颜色，默认继承 currentColor
text	string	—	说明文字
vertical	boolean	true	文字是否在动画下方
loading	boolean	false	是否显示（包裹模式）
fullscreen	boolean	false	是否全屏
delay	number	200	延迟显示（毫秒）
clickThrough	boolean	false	是否允许点击穿透

插槽

名称	说明
default	被包裹的内容（包裹模式下）

无障碍

• 容器带 role="status" 与 aria-live="polite"， 读屏软件会播报"加载中"这类状态
• 动画元素加 aria-hidden="true"，避免被念成无意义的图形
• prefers-reduced-motion 下降级为静态指示（如停止旋转、 改为一个静态圆环）而非直接隐藏——加载状态本身是重要信息， 消失会让用户以为界面卡死了
• fullscreen 时焦点限制在遮罩内，或至少提供可关闭的途径