显示一个动画加载指示器。
<Spinner />
此组件基于 span 元素,并支持 常见的 margin 属性。
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>Bookmark</Button>
如果您在按钮内有一个图标,您可以使用按钮的 disabled 状态,并将图标包装在独立的 <Spinner> 中,以实现更精致的设计。
disabled
<Spinner>
<Button disabled> <Spinner loading> <BookmarkIcon /> </Spinner> Bookmark </Button>