---
url: /components/spin.md
---
# Spin 加载中

加载指示器，三种形态：独立指示、包裹内容（半透明遮罩 + 模糊）、全屏遮罩。支持延迟显示防止闪烁，以及进度百分比展示。

## 独立使用

## 尺寸

## 包裹内容

有默认插槽时自动进入包裹模式：加载中给内容加遮罩与模糊，`spinning` 关闭后恢复交互。表格局部刷新推荐这种形态：

## 全屏遮罩

`fullscreen` 模式挂载到 body，适合提交表单、跳转前的整页阻塞；点击开始后 3 秒自动关闭：

## 延迟显示

`delay`（毫秒）内加载完成则不出现指示器，避免快速接口反复闪烁：

## Spin API

### Props

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| spinning | Boolean | `true` | 加载中状态 |
| size | String | `'default'` | 尺寸：`small` / `default` / `large` |
| description | String | `''` | 加载文案（`description` 插槽优先） |
| fullscreen | Boolean | `false` | 全屏遮罩（Teleport 到 body） |
| percent | Number / String | — | 进度百分比；传 `'auto'` 显示流动进度 |
| delay | Number | `0` | 延迟显示毫秒数，防闪烁 |

### Slots

| 名称 | 说明 |
| --- | --- |
| default | 包裹的内容（存在时进入包裹模式） |
| indicator | 自定义指示器 |
| description | 自定义加载文案 |

## 指令形态

按钮级/区块级简单加载可用 `v-loading` 指令，Spin 组件适合需要文案/进度/全屏能力的场景。