加载中 Spin
用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
安装
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 | - | - |