# 加载中 Loading

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/loading
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用于页面和区块的加载中状态。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

用于页面和区块的加载中状态。

## 何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

## DotLoading 点状加载中

### 属性

| 属性  | 说明 | 类型                                          | 默认值      |
| ----- | ---- | --------------------------------------------- | ----------- |
| color | 颜色 | `'default' \| 'primary' \| 'white' \| string` | `'default'` |

`DotLoading` 的大小会自动根据当前的文字大小进行调整。

## SpinLoading 转圈加载中

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 线条颜色，等效于手动设置 `--color` CSS 变量 | `'default' \| 'primary' \| 'white' \| string` | `'default'` |

### CSS 变量

| 属性    | 说明     | 默认值                  |
| ------- | -------- | ----------------------- |
| --color | 线条颜色 | `var(--adm-color-weak)` |
| --size  | 大小     | `32px`                  |

## Loading

为了保持对旧版本用法的兼容，我们保留了 Loading 的引用，所以如果你继续使用 Loading，依旧是没有问题的。但由于未来的大版本升级中我们很有可能会移除掉 Loading 这个引用，所以如果你看到了这条提示，请尽快将项目中的 Loading 替换为 DotLoading。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt