旋转器

<Spinner />

API 参考

¥API Reference

此组件基于 span 元素并支持 常用边距属性。

¥This component is based on the span element and supports common margin props.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制旋转器的大小。

¥Use the size prop to control the size of the spinner.

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

使用子元素

¥With children

使用 loading 属性控制是否显示旋转器或其子项。Spinner 在隐藏子元素时会保留其尺寸并禁用交互元素。

¥Use the loading prop to control whether the spinner or its children are displayed. Spinner preserves the dimensions of children when they are hidden and disables interactive elements.

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

	<Spinner loading={false}>
		<Switch defaultChecked />
	</Spinner>
</Flex>

使用按钮

¥With buttons

按钮 有自己的 loading 属性，可以自动组成一个旋转器。

¥Buttons have their own loading prop that automatically composes a spinner.

<Button loading>Bookmark</Button>

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

¥If you have an icon inside the button, you can use the button’s disabled state and wrap the icon in a standalone <Spinner> to achieve a more sophisticated design.

<Button disabled>
	<Spinner loading>
		<BookmarkIcon />
	</Spinner>
	Bookmark
</Button>