Spin加载中
Spin
加载中
使用import { Spin } from 'antd'; |
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | × | |
| description | 可以自定义描述文案 | ReactNode | - | 6.3.0 | × |
| fullscreen | 显示带有 Spin 组件的背景 | boolean | false | 5.11.0 | × |
| indicator | 加载指示符 | ReactNode | - | 5.20.0 | |
| percent | 展示进度，当设置 percent="auto" 时会预估一个永远不会停止的进度 | number | 'auto' | - | 5.18.0 | × |
| size | 组件大小，可选值为 small medium large | string | medium | × | |
| spinning | 是否为加载中状态 | boolean | true | × | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
当作为包裹元素时，可以自定义描述文案。已废弃，请使用 description | ReactNode | - | × | ||
包装器的类属性。已废弃，请使用 classNames.root | string | - | × |
Spin.setDefaultIndicator(indicator: ReactNode)
你可以自定义全局默认 Spin 的元素。
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| contentHeight | 内容区域高度 | string | number | 400 |
| dotSize | 加载图标尺寸 | number | 20 |
| dotSizeLG | 大号加载图标尺寸 | number | 32 |
| dotSizeSM | 小号加载图标尺寸 | number | 14 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainer | 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。 | string | #ffffff |
| colorBgMask | 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer、Image 等组件的蒙层使用的是该 token | string | rgba(0,0,0,0.45) |
| colorFillSecondary | 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 | string | rgba(0,0,0,0.06) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDescription | 控制文本描述字体颜色。 | string | rgba(0,0,0,0.45) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| colorWhite | 不随主题变化的纯白色 | string | #fff |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| marginXXS | 控制元素外边距，最小尺寸。 | number | 4 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| paddingSM | 控制元素的小内间距。 | number | 12 |
| zIndexPopupBase | 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等 | number | 1000 |
Loading state：
Loading state：