# Spin

- Page: https://jiguang132.com/resources/arco-design/docs/spin
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used for the loading state of pages. When part of the page is waiting for asynchronous data or is in the rendering process, appropriate loading amimation will effectively alleviate user anxiety.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: A simple loading state.
- **Dot Indicator**: The dot type indicator can be displayed by specifying the `dot` property.
- **As Container**: You can add loading status to any element. The container defaults to the `inline-block` layout. When you need to fill the parent container, you can set `style={{ display:'block' }}`.
- **Tip**: Use `tip` property to customize the tip when loading.
- **Delay**: Use `delay` to delay the switch of loading status, which effectively avoids screen flicker during rapid state switching.
- **Custom Icon**: By specifying `icon`, you can specify a custom icon as a loading component.
- **Size**: Set `size` to get different sizes of loading icons.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Spin

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|block|Whether it is a block-level element|boolean |`-`|2.29.0|
|dot|Whether to use dot type animation|boolean |`-`|-|
|loading|Whether is loading status (Only works when `Spin` has children))|boolean |`-`|-|
|delay|Specifies a delay(ms) for loading state|number |`-`|-|
|size|The size of loading icon|number |`-`|-|
|element|Customize element which won't be rotated automatically, such as image/gif.|ReactNode |`-`|-|
|icon|Customize icon which will be rotated automatically.|ReactNode |`-`|-|
|tip|Customize description content when Spin has children|string \| ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt