Spin
加载中

用于页面和区块的加载中状态。
使用import{ Spin }from"antd";

何时使用

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

代码演示

一个简单的 loading 状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Loading state:

可以直接把内容内嵌到 Spin 中,将现有容器变为加载状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Loading state:

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束,则不显示 loading 状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

展示进度,当设置 percent="auto" 时会预估一个永远不会停止的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0

小的用于文本加载,默认用于卡片容器级加载,大的用于页面级加载。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loading
Loading
Loading
Loading...

自定义描述文案。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

使用自定义指示符。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

fullscreen 属性非常适合创建流畅的页面加载器。它添加了半透明覆盖层,并在其中心放置了一个旋转加载符号。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

参数说明类型默认值版本
delay延迟显示加载效果的时间(防止闪烁)number (毫秒)-
fullscreen显示带有 Spin 组件的背景booleanfalse5.11.0
indicator加载指示符ReactNode-
percent展示进度,当设置 percent="auto" 时会预估一个永远不会停止的进度number | 'auto'-5.18.0
size组件大小,可选值为 small default largestringdefault
spinning是否为加载中状态booleantrue
tip当作为包裹元素时,可以自定义描述文案ReactNode-
wrapperClassName包装器的类属性string-

静态方法

  • Spin.setDefaultIndicator(indicator: ReactNode)

    你可以自定义全局默认 Spin 的元素。

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
contentHeight内容区域高度string | number400
dotSize加载图标尺寸number20
dotSizeLG大号加载图标尺寸number32
dotSizeSM小号加载图标尺寸number14

全局 Token如何定制?