JGuang

加载中

Spin · Arco Design

交互预览
npm install @arco-design/web-react@2.66.18

加载中 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--