Spin加载中
Spin
加载中
用于页面和区块的加载中状态。
使用import{ Spin }from"antd"; |
何时使用
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
代码演示
一个简单的 loading 状态。
Loading state：
可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。
Loading state：
延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。
展示进度，当设置 percent="auto" 时会预估一个永远不会停止的进度条。
5.18.0
小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。
Loading
Loading
Loading
Loading...
自定义描述文案。
使用自定义指示符。
fullscreen 属性非常适合创建流畅的页面加载器。它添加了半透明覆盖层，并在其中心放置了一个旋转加载符号。
API
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | |
| fullscreen | 显示带有 Spin 组件的背景 | boolean | false | 5.11.0 |
| indicator | 加载指示符 | ReactNode | - | |
| percent | 展示进度，当设置 percent="auto" 时会预估一个永远不会停止的进度 | number | 'auto' | - | 5.18.0 |
| size | 组件大小，可选值为 small default large | string | default | |
| spinning | 是否为加载中状态 | boolean | true | |
| tip | 当作为包裹元素时，可以自定义描述文案 | ReactNode | - | |
| wrapperClassName | 包装器的类属性 | string | - |
静态方法
Spin.setDefaultIndicator(indicator: ReactNode)你可以自定义全局默认 Spin 的元素。
主题变量（Design Token）
组件 Token如何定制？
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| contentHeight | 内容区域高度 | string | number | 400 |
| dotSize | 加载图标尺寸 | number | 20 |
| dotSizeLG | 大号加载图标尺寸 | number | 32 |
| dotSizeSM | 小号加载图标尺寸 | number | 14 |