组件

Spinner

显示一个动画加载指示器。

<Spinner />

API 参考

此组件基于 span 元素,并支持 常见的 margin 属性

属性类型默认值
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>Bookmark</Button>

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

<Button disabled>
<Spinner loading>
<BookmarkIcon />
</Spinner>
Bookmark
</Button>
上一页滑块
下一页开关