显示动画加载指示器。
<Spinner />
该组件基于 span 元素,支持 常见的边距属性。
span
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> 中,以实现更复杂的设计。
disabled
<Spinner>
<Button disabled> <Spinner loading> <BookmarkIcon /> </Spinner> 收藏 </Button>