## 22 · 加载 Loading

### 22.1 用途
告诉用户「系统正在处理，请等」并占住当前位置。移动端与桌面端的差别在**是否独占屏幕**：桌面端加载指示多是区块内的一个转圈，移动端常需要 `fullscreen` 铺一层遮罩 —— 提交订单、支付这类不可中断的动作期间，必须挡住下方的重复点击。

### 22.2 结构（anatomy）
- `loading`：根元素，内联形态（转圈 + 文案同行或上下排）；`fullscreen=true` 时它本身即遮罩层
- `spinner`：转圈，由 CSS 动画驱动（三端一致，不依赖图片或字体）
- `text`：可选文案，说明「在等什么」；为空时只有转圈
- `panel`：全屏形态下的卡片面板，承载指示器与文案，保证遮罩上的对比度可控
- `mask`：全屏形态的遮罩底色（取令牌，语义等同弹窗遮罩）

### 22.3 变体维度
- `size`：`small`（16px） / `default`（20px） / `large`（28px）
- `vertical`：`false`（横行） / `true`（上下排布）
- `fullscreen`：`false`（区块内） / `true`（遮罩全屏）

### 22.4 状态
- loading：转圈持续旋转，`aria-busy="true"`（默认语义）
- open：`fullscreen=true` 且展开时可见并可截获手势
- done：加载结束后的过渡态（转圈停止），实际结果提示由宿主替换（本组件不自动消失）
- disabled：无独立禁用态 —— 加载中「不可操作」由遮罩承担，不是把控件置灰

### 22.5 交互与触控
- 加载组件本身**不可点**，也不抢焦点（不打断读屏正在读的内容）
- `fullscreen=true` 且 `open` 时遮罩截获手势，下方内容不可点；未展开时不截获
- 转圈动画 800ms/圈（`--kole-m-loading-duration` 可覆盖），时长恒定不随尺寸变化
- `prefers-reduced-motion: reduce` 下停止旋转（改为静态环），避免前庭不适
- 加载超过一次会话的合理时长时应由宿主提供取消入口，本组件不自己造取消按钮

### 22.6 无障碍
- 容器 `role="status"` + `aria-live="polite"`（状态变化被播报，且不打断当前朗读）
- 加载中置 `aria-busy="true"`；全屏遮罩未展开时置 `"false"`
- 转圈是装饰（`aria-hidden="true"`），语义全部由文案与 `role="status"` 承担
- 文案要具体（「正在提交订单…」而不是「加载中」），读屏用户与视力用户获得同样的信息量

### 22.7 doNotInvent
- 加载耗时的进度百分比（本组件不假装知道进度）
- 超时后的自动提示 / 自动重试
- 多条加载的排队与合并

### 22.8 unknowns
- 全屏加载持续多久后应提示「可能需要更长时间」
- 文案的最大长度与换行策略