Spin
Used for the loading status of a page or a block.
When To Use
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
Examples
- Basic Usage ·
basic - Size ·
size - Embedded mode ·
nested - Customized description ·
tip - Delay ·
delayAndDebounce - Custom spinning indicator ·
custom-indicator - Progress ·
percent - Custom semantic dom styling ·
style-class - Fullscreen ·
fullscreen
API
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | × | |
| description | Customize description content | ReactNode | - | 6.3.0 | × |
| fullscreen | Display a backdrop with the Spin component | boolean | false | 5.11.0 | × |
| indicator | React node of the spinning indicator | ReactNode | - | 5.20.0 | |
| 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, medium and large | string | medium | × | |
| spinning | Whether Spin is visible | boolean | true | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
Customize description content when Spin has children. Deprecated, use description instead | ReactNode | - | × | ||
The className of wrapper when Spin has children. Deprecated, use classNames.root instead | string | - | × |
Static Method
-
Spin.setDefaultIndicator(indicator: ReactNode)You can define default spin element globally.
Semantic DOM
| Semantic node | Native description | Version |
|---|---|---|
root | The root element, which sets absolute positioning, display control, color, font size, text alignment, vertical alignment, opacity, and transition animation (only effective when fullscreen is false) | 6.0.0 |
section | The loading element area, which sets relative positioning, flexbox layout, alignment, and color | 6.3.0 |
indicator | The indicator element, which sets width, height, font size, inline-block display, transition animation, transform origin, and line height | 6.0.0 |
description | The description element, which sets font size and line height | 6.3.0 |
container | The container element that holds the child elements wrapped by Spin, setting opacity and transition animation | 6.3.0 |
Semantic description source: vendor/components/spin/demo/_semantic.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
| Token | Type | Native description |
|---|---|---|
contentHeight | number | string | Height of content area |
dotSize | number | Loading icon size |
dotSizeSM | number | Small loading icon size |
dotSizeLG | number | Large loading icon size |
Declaration source: vendor/components/spin/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
export interface ComponentToken {
/**
* @desc 内容区域高度
* @descEN Height of content area
*/
contentHeight: number | string;
/**
* @desc 加载图标尺寸
* @descEN Loading icon size
*/
dotSize: number;
/**
* @desc 小号加载图标尺寸
* @descEN Small loading icon size
*/
dotSizeSM: number;
/**
* @desc 大号加载图标尺寸
* @descEN Large loading icon size
*/
dotSizeLG: number;
}
interface SpinToken extends FullToken<'Spin'> {
spinDotDefault: string;
}
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/spin/Indicator/Looper.tsxvendor/components/spin/Indicator/Progress.tsxvendor/components/spin/Indicator/index.tsxvendor/components/spin/index.tsxvendor/components/spin/style/index.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.