---
title: 加载
slug: 加载
category: 组件
figma_node_id: 1:42
figma_page_name: ＞加载
aliases: [Loading, Spinner, Skeleton, 加载中, 骨架屏]
last_extracted: 2026-05-19
status: ok
---

# 加载

> 异步操作进行中、内容尚未就绪时的等待反馈。如流加载分**页面加载**和**模块加载**两类，按尺寸提供 108px / 96px 两档。页面级加载适合内容种类单一的场景；有固定模块的一级页面（如工作流）应使用骨架屏；模块加载失败则在模块内居中展示空态图。

## 类型与号型

按使用范围分两类（桌面端 + 移动端均区分）：

| 类型 | 适用 | 视觉表现 |
|---|---|---|
| 页面加载 | 整页内容种类单一、需要等待整体就绪 | 整页居中放置 Loading 指示器 |
| 模块加载 | 有固定模块的一级页面（如工作流） | 数据未到位用骨架屏，模块加载失败用空态图在模块内居中 |
| Loading 通用样式 | 按钮 / 卡片内加载（移动端区块） | 沿用 Loading 指示器，按容器尺寸自适应 |

按号型分两档（来自桌面端"页面加载"区文字标注）：

| 号型 | 应用场景 |
|---|---|
| **108px** | 页面级加载，适用于较大窗口 |
| **96px** | 适用于小窗口或侧边栏 |

## 尺寸规格

数值取自 Figma `globalVars` 中各 layout token：

| 元素 | 宽 × 高 | 来源 |
|---|---|---|
| 桌面端规范画板 | 1280 × 2393px | `layout_81TGFL` |
| 移动端规范画板 | 1280 × 4994px | `layout_243IIO` |
| 桌面端"加载 2"实例（108px 档） | 108 × 108px | `layout_LAZ1GM`（`componentId: 3014:1038`） |
| 桌面端"加载中"卡片示例 | 468 × 246px | `layout_GRX88C`：白底 + 0.5px 描边 `rgba(225,230,240,0.5)` + 8px 圆角 + 投影 |
| 108px 档标尺（Redlines 加载 2） | 40 × 108 / 108 × 40 | `layout_SHWLDV / 9EDFB1` |
| 96px 档标尺（Redlines 加载 1） | 40 × 96 / 96 × 40 | `layout_2XWKUG / 5T46CW` |
| 桌面端"页面加载"标题 | 80 × 30px | `layout_PWWZJT`（20px Semibold） |
| 桌面端 Section 区块 | 960 × 640px | `layout_6B1ENY / 47YCNN`（两个示例容器） |
| 移动端"模块加载"标题 | 80 × 30px | `layout_1CIHRY` |
| 移动端示例手机画板 | 375 × 812 / 377 × 812px | `layout_48DA4B / L5DXF5 / IRSK2P / 7XSA6S / L8IRE2 / F05UNM` |
| 移动端 image 3（页面级加载示意图） | 375 × 812px | `layout_0QHX1H`，`imageRef: a88c46a189073934e274a16f80fb72ed6db48e16` |
| 移动端"Loading 通用样式"标题 | 157 × 21px | `layout_66UWS8`（20px Semibold） |
| 章节小标题（20/30 Semibold） | 80 × 30px | `style_ZCW258`：20px Semibold，行高 30px |
| 说明正文（14/21 Regular） | 多档 | `style_QZ9DWE`：14/21 Regular |
| 圆角 | 8px | 加载卡片 `borderRadius: 8px` |
| 描边 | rgba(225, 230, 240, 0.5) | `fill_158MN4` |
| 投影 | `0 3 10 rgba(135, 141, 153, 0.2)` | `effect_IUNRG2` |

## 状态

| 状态 | 含义 |
|---|---|
| 加载中 | Spinner 持续旋转，数据未就绪 |
| 加载成功 | Spinner 消失，内容渲染 |
| 加载失败 | 模块加载失败 → 模块内居中展示**空态图**；页面加载失败 → 整页提示 |

## 颜色与 token

| 用途 | hex | 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `White` | 通用底色 |
| 演示底色（模块加载灰底） | `#F7F8FA` = `C-Coolgray20` | `fill_Z0AVG4`（移动端 960×560 / 960×892 示意底） |
| 描边 | `rgba(225, 230, 240, 0.5)` | 加载卡片轻描边（约 `C-Coolgray50` 透明 50%） |
| 投影 | `rgba(135, 141, 153, 0.2)` 0 3 10 | 加载卡片下方投影 |
| 章节标题文字 | `#000000` | 20px Semibold |
| 演示用前缀小竖条 | `#333333` | 4×24 竖条标签（标题前置） |
| 标题文字 | `#000000` | 加载示意区主文字 |

> 加载 Spinner 本身的颜色未在本页以独立 token 给出（实例 `加载 2` 引自外部 component `3014:1038`），通常采用品牌色或主文字色衍生。
> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

- **桌面端 108px Spinner 位置**：在 960 × 640 示意容器内居中（实例 x=587, y=748）
- **桌面端"加载中"卡片**：468 × 246，居中陈列于示意区
- **桌面端 96px 档**：位于画板下半，与 108px 上下错位演示
- **移动端模块加载区**（y=494–1386）：960 × 892 灰底底板，内嵌 4 个手机示意
- **移动端页面加载区**（y=1626–2186）：960 × 560 白底 + 灰底切换
- **页面加载示意图**：375 × 812 整页骨架屏图（`imageRef: a88c46a189073934e274a16f80fb72ed6db48e16`）

## 文案规则

- 加载中无需文字（Spinner 即可）；若需要文字提示，使用"加载中…"短文案
- 失败态：模块内空态图配简短文案（如"加载失败，点击重试"）
- 避免在 Spinner 旁堆叠多行说明文字（违反"轻量"反馈定位）

## 交互行为

> 页面级加载，适合内容种类单一的场景。
> 适用于有固定模块的模块的一级页面（如工作流）。数据没加载出来使用骨架屏展示，模块加载失败使用空态图在模块内居中展示。

- **触发**：异步请求发起即显示，请求结束即隐藏
- **页面级加载**：Spinner 在视口居中（108px 大窗口 / 96px 小窗口）
- **模块加载**：使用**骨架屏**而非 Spinner，让用户预知内容布局
- **模块加载失败**：模块内居中展示**空态图** + 简短提示
- **持续时间**：与请求时长一致，超 5s 应考虑显示进度提示或失败兜底
- **不应阻断**：加载本身不带蒙层，用户可继续浏览未涉及的其他模块

## 示例

![桌面端-页面加载-108px](../图片/组件/加载/desktoppageloading108px.png)
![桌面端-页面加载-96px](../图片/组件/加载/desktoppageloading96px.png)
![桌面端-加载中卡片示意](../图片/组件/加载/desktoploadingcard.png)
![移动端-模块加载-骨架屏](../图片/组件/加载/mobilemo-kuailoadinggu-jia-ping.png)
![移动端-页面加载-整页](../图片/组件/加载/mobilepageloadingfullpage.png)
![移动端-Loading 通用样式](../图片/组件/加载/mobileLoadinggeneralyang-shi.png)
![移动端-页面加载-image3](../图片/组件/加载/mobilepageloadingdemotu.png)
![加载标尺-108×40 / 40×108](../图片/组件/加载/biao-chi108px.png)
![加载标尺-96×40 / 40×96](../图片/组件/加载/biao-chi96px.png)

## 设计考量 / 原文摘录

> 108px：页面级加载，适用于较大窗口。
> 96px：适用于小窗口或侧边栏。
> 页面级加载，适合内容种类单一的场景。
> 适用于有固定模块的模块的一级页面（如工作流）。数据没加载出来使用骨架屏展示，模块加载失败使用空态图在模块内居中展示。
> Loading 通用样式。

- **页面加载 vs 模块加载**：单一内容用 Spinner，结构化页面用骨架屏，本质是"是否给用户预知布局"
- **失败兜底**：模块失败用空态图，避免空白让用户误判页面崩溃
- **108 / 96 二档**：与设备 / 窗口尺度对齐，避免 Spinner 过小被忽略或过大喧宾夺主

## 不推荐用法

- 在结构化页面（如工作流）用 Spinner 替代骨架屏（用户无法预知布局，体感更慢）
- 在加载态期间继续允许触发同一请求（应禁用相关按钮）
- 失败态不给反馈（必须使用空态图 + 文案，否则像页面崩了）
- 加载持续 > 5s 无任何进度提示
- Spinner 旁堆叠多行说明文字
- 在 Toast 中模拟 Loading（应改用 ICON+文字加载中 Toast 或直接用本组件）

## 关联

- 异步加载中的轻提示见 [Toast](Toast.md)（ICON+文字/加载中变体）
- 异步操作加载按钮见 [按钮](按钮.md)（loading 状态）
- 模块加载失败配套的空态图见 [空页面](空页面.md)
- 阻断式异步操作（保存中等）见 [弹窗](弹窗.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
