2016-07-21 09:51:04 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Feedback
2016-07-21 09:51:04 +08:00
title: Spin
2024-03-22 14:22:42 +08:00
description: Used for the loading status of a page or a block.
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5mC5TomY4B0AAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i43_ToFrL8YAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-07-21 09:51:04 +08:00
---
2016-09-10 13:43:30 +08:00
## When To Use
2016-07-21 09:51:04 +08:00
2016-11-29 17:13:24 +08:00
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
2016-07-21 09:51:04 +08:00
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2023-10-19 13:47:48 +08:00
< code src = "./demo/basic.tsx" > Basic Usage< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/size.tsx" > Size< / code >
< code src = "./demo/nested.tsx" > Embedded mode< / code >
< code src = "./demo/tip.tsx" > Customized description< / code >
2023-10-19 13:47:48 +08:00
< code src = "./demo/delayAndDebounce.tsx" > Delay< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/custom-indicator.tsx" > Custom spinning indicator< / code >
2024-06-03 11:30:27 +08:00
< code src = "./demo/percent.tsx" version = "5.18.0" > Progress< / code >
2023-10-19 13:47:48 +08:00
< code src = "./demo/fullscreen.tsx" > Fullscreen< / code >
2022-11-09 12:28:04 +08:00
2016-07-21 09:51:04 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2023-10-19 13:47:48 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2020-07-02 16:13:17 +08:00
| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
2023-10-19 13:47:48 +08:00
| fullscreen | Display a backdrop with the `Spin` component | boolean | false | 5.11.0 |
2024-06-03 11:30:27 +08:00
| indicator | React node of the spinning indicator | ReactNode | - | |
| percent | The progress percentage, when set to `auto` , it will be an indeterminate progress | number \| 'auto' | - | 5.18.0 |
| size | The size of Spin, options: `small` , `default` and `large` | string | `default` | |
| spinning | Whether Spin is visible | boolean | true | |
| tip | Customize description content when Spin has children | ReactNode | - | |
| wrapperClassName | The className of wrapper when Spin has children | string | - | |
2018-06-06 19:32:30 +08:00
### Static Method
2019-12-20 15:07:18 +08:00
- `Spin.setDefaultIndicator(indicator: ReactNode)`
2019-12-26 15:27:52 +08:00
You can define default spin element globally.
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Spin" > < / ComponentTokenTable >
