# 加载中 Spin

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/spin
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

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

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：一个简单的 loading 状态。
- **点类型的指示符**：通过 `dot`属性，可以展示点类型的指示符。
- **容器中**：可以给任意元素添加加载状态。容器默认是 `inline-block` 布局，当你需要撑满父级容器时，可以设置 `style={{ display: 'block' }}`。
- **自定义描述文案**：通过 `tip` 字段自定义加载时的文案。
- **延迟**：通过 `delay` 延迟显示 loading，对状态切换进行防抖处理，有效避免状态快速切换时的屏幕闪烁。
- **自定义指示符**：通过指定 `icon` 可以指定自定义图标作为加载组件。
- **不同尺寸**：设置 `size` 可以得到不同尺寸的加载图标。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API
### Spin

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|block|是否为块级元素|boolean |`-`|2.29.0|
|dot|是否使用点类型的动画|boolean |`-`|-|
|loading|是否为加载状态（仅在 `Spin` 有子节点时生效）|boolean |`-`|-|
|delay|延迟显示加载的时间 (ms)|number |`-`|-|
|size|加载动画的尺寸|number |`-`|-|
|element|自定义元素，非图标，不附带旋转效果。可用于设置为 gif 图片等。|ReactNode |`-`|-|
|icon|自定义图标，会自动旋转。|ReactNode |`-`|-|
|tip|加载的文案|string \| ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|style|节点样式|CSSProperties |`-`|-|

---

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