Spin

何时使用 {#when-to-use}

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

代码演示 {#examples}

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">基本用法</code> <code src="./demo/size.tsx">各种大小</code> <code src="./demo/nested.tsx">卡片加载中</code> <code src="./demo/tip.tsx">自定义描述文案</code> <code src="./demo/delayAndDebounce.tsx">延迟</code> <code src="./demo/custom-indicator.tsx">自定义指示符</code> <code src="./demo/percent.tsx" version="5.18.0">进度</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/fullscreen.tsx">全屏</code>

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>	-
delay	延迟显示加载效果的时间（防止闪烁）	number (毫秒)	-
description	可以自定义描述文案	ReactNode	-	6.3.0
fullscreen	显示带有 Spin 组件的背景	boolean	false	5.11.0
indicator	加载指示符	ReactNode	-
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>	-
tip	当作为包裹元素时，可以自定义描述文案。已废弃，请使用 description	ReactNode	-
wrapperClassName	包装器的类属性。已废弃，请使用 classNames.root	string	-

静态方法

• Spin.setDefaultIndicator(indicator: ReactNode)

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

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

主题变量（Design Token）{#design-token}

<ComponentTokenTable component="Spin"></ComponentTokenTable>