Spin 加载中
加载指示器，可单独使用，也可包裹内容并叠加遮罩；支持文案、进度、全屏与自定义指示器。
基础用法
size 支持 xs / small / medium（默认）/ large / xl 五档；旧缩写 sm/md/lg 保留兼容。
五种尺寸
旧缩写别名（sm / md / lg）
size 还接受任意 CSS 尺寸：纯数字按 px 解释，带单位值（2rem / 40px / 10%）与 calc() 直取。
任意值尺寸
形态变体
variant 提供三档形态：ring（默认边框环）/ dot（三点脉冲）/ bars（三条伸缩），尺寸体系三形态通用。
ring / dot / bars
dot 行内小尺寸（文字旁加载）
加载文案 tip
tip 属性配纯文本，具名 tip 插槽配富内容（插槽优先）；tip-position 控制文案方位（above / below 默认 / before / after）；hide-icon 只要文案不要指示器。
tip 文案与四向方位
富文案插槽与 hide-icon
包裹内容
包裹内容时指示器与文案居中显示并叠加半透明遮罩；show-overlay="false" 关闭遮罩。
包裹内容
关闭遮罩（show-overlay="false"）
delay 防闪烁
请求快于动画感知时，指示器一闪而过反而干扰。delay（毫秒）让指示器延迟出现：延迟窗口内加载结束则完全不出现；aria-busy 语义立即生效不受延迟影响。
快速请求不闪烁
自定义指示器
具名 icon 插槽替换默认环（尺寸由内容自带）；rotate 属性让自定义指示器旋转——普通 SVG 图标加 rotate，GIF / 静态 SVG 不加即保持静止。
icon 插槽与 rotate
进度模式 percent
未知时长用默认形态；已知进度时 percent（0-100）切换为 determinate 进度环（role="progressbar" + aria-value 三件套）；percent="auto" 在加载期间自动推进模拟进度（上限 90%，结束后从头推进）。确定进度场景也可用 Progress 进度 的 circle 形态。
determinate 进度环
进度步进与 auto 模拟进度
暂停 paused
paused 冻结循环动画（保留当前帧），用于截图 / 演示 / 逐帧检查场景。
paused 冻结对比
视觉定制
组件级 CSS 变量：--oas-spin-indicator-color（指示色）/ --oas-spin-track-color（轨道色）/ --oas-spin-border-width（线宽）/ --oas-spin-duration（动画时长）/ --oas-spin-mask-bg（遮罩背景）/ --oas-spin-z-index（全屏层级）。inherit-color 让指示色继承宿主文字色；block 让宿主占满一行。
CSS 变量定制
inherit-color 继承文字色
全屏加载
fullscreen 属性进入全屏遮罩居中加载；命令式 OASSpin.fullscreen() 返回 { close } 句柄，适合异步流程中直接调用（可叠用，各句柄独立关闭）。
全屏加载（2 秒后自动关闭）
全局默认指示器
OASSpin.setDefaultIndicator(html) 注册品牌加载动画：此后新建的实例在未用 icon 插槽时渲染注册的 HTML 替代内置环；传 null 恢复。优先级：icon 插槽 > 全局默认 > 内置环。
注册全局指示器并新建实例
无障碍
- 指示器
role="status"，内置视觉隐藏读屏文案（默认走 locale 的「加载中…」，设置tip后读tip，宿主aria-label优先级最高） - 进度模式切换为
role="progressbar"并同步aria-valuemin/max/now - 宿主
aria-busy随spinning立即同步；区域加载建议为内容容器补充aria-busy并以aria-describedby指向 spin：
<section aria-busy="true" aria-describedby="page-spin">
<oas-spin id="page-spin" spinning tip="加载中"></oas-spin>
<!-- 区域内容 -->
</section>- 系统开启「减少动态效果」时动画自动降级为静态指示器（
prefers-reduced-motion）
API
oas-spin
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
aria-label | 读屏文案（aria-busy 同步） | — | — |
block | 块级铺满容器宽度 | — | — |
delay | 防闪烁延迟（ms）：spinning 置位后延迟渲染，delay 内结束则完全不出现 | string | — |
fullscreen | 全屏加载（遮罩铺满视口） | — | — |
hide-icon | 隐藏默认指示器（配合 slot="icon" 或纯文案） | boolean | — |
inherit-color | 指示器继承宿主文字色 | — | — |
paused | 暂停旋转（进度模式冻结推进） | — | — |
percent | 进度模式：number 显式百分比或 auto（未知进度模拟推进） | string | — |
rotate | 自定义指示器是否自动旋转（默认不转——仅在属性在场时旋转；gif/静态 SVG 不设即保持静止） | boolean | — |
show-overlay | 包裹内容时是否显示遮罩 | string | true |
size | 指示器尺寸：xs / small / medium（默认）/ large / xl；旧缩写 sm/md/lg 保留兼容 | string | medium |
spinning | 是否加载中；设置后包裹内容并叠加遮罩 | boolean | — |
tip | 加载文案（独立态显示于指示器下方，包裹态显示于遮罩中央）；富内容用 slot="tip" | string | — |
tip-position | 文案位置 | string | below |
variant | 形态变体 | string | ring |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 被包裹的内容（包裹态叠加遮罩） |
icon | 自定义指示器插槽，替换默认圆环 |
tip | 加载文案富内容插槽，覆盖 tip 属性 |
CSS 变量
| CSS 变量 | 说明 | 默认值 |
|---|---|---|
--oas-spin-border-width | 线宽（环形边框 / 进度条）；xs、small 档为 2px | 3px |
--oas-spin-duration | 旋转周期 | 0.8s |
--oas-spin-indicator-color | 指示器颜色 | var(--oas-color-primary) |
--oas-spin-mask-bg | 遮罩背景（包裹态 / 全屏态） | color-mix(in srgb, var(--oas-color-bg) 70%, transparent) |
--oas-spin-track-color | 轨道色（环形底轨 / 进度槽） | var(--oas-color-bg-hover) |
--oas-spin-z-index | 全屏层级 | 3500 |
静态方法
| 方法 | 说明 |
|---|---|
OASSpin.fullscreen(options?) | 命令式全屏加载，返回 { close() }；options: { tip?: string; delay?: number } |
OASSpin.setDefaultIndicator(html | null) | 注册全局默认指示器（此后新建实例生效）；null 恢复内置环 |
指示器 role="status"（进度模式为 role="progressbar" + aria-value 三件套），内置读屏文案；宿主 aria-busy 随 spinning 同步。