Components

加载指示器

显示动画加载指示器。

<Spinner />

API 参考

该组件基于 span 元素,支持 常见的边距属性

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
loading
boolean
true

示例

大小

使用 size 属性控制加载指示器的大小。

<Flex align="center" gap="4">
<Spinner size="1" />
<Spinner size="2" />
<Spinner size="3" />
</Flex>

带子元素

使用 loading 属性控制加载指示器或其子元素是否显示。当子元素被隐藏时,加载指示器会保留子元素的尺寸并禁用交互元素。

<Flex gap="4">
<Spinner loading={true}>
<Switch defaultChecked />
</Spinner>
<Spinner loading={false}>
<Switch defaultChecked />
</Spinner>
</Flex>

带按钮

按钮 有自己的 loading 属性,可以自动组合加载指示器。

<Button loading>收藏</Button>

如果按钮内部有图标,可以使用按钮的 disabled 状态并将图标包装在独立的 <Spinner> 中,以实现更复杂的设计。

<Button disabled>
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>