logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Spin

Used for the loading status of a page or a block.
Importimport { Spin } from "antd";
Sourcecomponents/spin
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
delaySpecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
fullscreenDisplay a backdrop with the Spin componentbooleanfalse5.11.0
indicatorReact node of the spinning indicatorReactNode-
percentThe progress percentage, when set to auto, it will be an indeterminate progressnumber | 'auto'-5.18.0
sizeThe size of Spin, options: small, default and largestringdefault
spinningWhether Spin is visiblebooleantrue
tipCustomize description content when Spin has childrenReactNode-
wrapperClassNameThe className of wrapper when Spin has childrenstring-

Static Method

  • Spin.setDefaultIndicator(indicator: ReactNode)

    You can define default spin element globally.

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
contentHeightHeight of content areastring | number400
dotSizeLoading icon sizenumber20
dotSizeLGLarge loading icon sizenumber32
dotSizeSMSmall loading icon sizenumber14
Global TokenHow to use?
Basic Usage

A simple loading status.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Embedded mode

Embedding content into Spin will set it into loading state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Delay

Specifies a delay for loading state. If spinning ends during delay, loading status won't appear.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Progress

Show the progress. When percent="auto" is set, an indeterminate progress will be displayed.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0
Size

A small Spin is used for loading text, default sized Spin for loading a card-level block, and large Spin used for loading a page.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customized description

Customize the description text.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom spinning indicator

Use custom loading indicator.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Fullscreen

The fullscreen mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Alert message title
Further details about the context of this alert.

Loading state:

Alert message title
Further details about the context of this alert.

Loading state:

Loading
Loading
Loading
Loading...
Alert message title
Further details about the context of this alert.