# 加载指示器

显示动画加载指示器。

```jsx
<Spinner />
```

## [API 参考](#api-参考)

该组件基于 `span` 元素，支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                            | Default |
| --------- | ------------------------------- | ------- |
| `size`    | `Responsive<"1" \| "2" \| "3">` | `"2"`   |
| `loading` | `boolean`                       | `true`  |

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性控制加载指示器的大小。

```jsx
<Flex align="center" gap="4">
  <Spinner size="1" />

  <Spinner size="2" />

  <Spinner size="3" />
</Flex>
```

### [带子元素](#带子元素)

使用 `loading` 属性控制加载指示器或其子元素是否显示。当子元素被隐藏时，加载指示器会保留子元素的尺寸并禁用交互元素。

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

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

### [带按钮](#带按钮)

[按钮](/themes/docs/components/button) 有自己的 `loading` 属性，可以自动组合加载指示器。

```jsx
<Button loading>收藏</Button>
```

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

```jsx
<Button disabled>
  <Spinner loading>
    <BookmarkIcon />
  </Spinner>
  收藏
</Button>
```

<!--$-->

<!--/$-->