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
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
---
2017-01-07 22:07:09 +08:00
A spinner for displaying loading state of a page or a section.
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 -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > basic Usage< / code >
< code src = "./demo/size.tsx" > Size< / code >
< code src = "./demo/inside.tsx" > Inside a container< / code >
< code src = "./demo/nested.tsx" > Embedded mode< / code >
< code src = "./demo/tip.tsx" > Customized description< / code >
< code src = "./demo/delayAndDebounce.tsx" > delay< / code >
< code src = "./demo/custom-indicator.tsx" > Custom spinning indicator< / code >
2016-07-21 09:51:04 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2021-02-28 09:35:34 +08:00
| Property | Description | Type | Default |
2019-11-20 17:46:50 +08:00
| --- | --- | --- | --- |
2020-07-02 16:13:17 +08:00
| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
2019-12-25 19:09:17 +08:00
| indicator | React node of the spinning indicator | ReactNode | - |
2020-07-02 16:13:17 +08:00
| size | The size of Spin, options: `small` , `default` and `large` | string | `default` |
2022-03-09 16:46:52 +08:00
| spinning | Whether Spin is visible | boolean | true |
2021-11-08 21:18:17 +08:00
| tip | Customize description content when Spin has children | ReactNode | - |
2020-07-02 16:13:17 +08:00
| 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 >
