组件

Spinner

<Spinner />

API 参考

此组件基于 span 元素,并支持通用 margin 属性

属性类型默认值
size
Responsive<"1" | "2" | "3">
"2"
loading
boolean
true

示例

尺寸

使用 size 属性控制 spinner 的尺寸。

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

带 children

使用 loading 属性控制 spinner 或其 children 是否显示。Spinner 在 children 隐藏时保留其尺寸,并禁用交互元素。

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

带按钮

按钮 有自己的 loading 属性,可自动组合 spinner。

<Button loading>Bookmark</Button>

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

<Button disabled>
<Spinner loading>
<BookmarkIcon />
</Spinner>
Bookmark
</Button>
上一个Slider
下一个Switch