Spin

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

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