logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • 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
  • 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
    • Tabs
    • 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.
가져오기import{ Spin }from"antd";
소스components/spin
문서
이 페이지 수정변경 로그

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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
Work with Us

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

컴포넌트 토큰어떻게 사용하나요?

토큰 이름설명타입기본값
contentHeight内容区域高度string | number400
dotSize加载图标尺寸number20
dotSizeLG大号加载图标尺寸number32
dotSizeSM小号加载图标尺寸number14

글로벌 토큰어떻게 사용하나요?

Basic Usage
codepen icon
External Link Icon
expand codeexpand code
Embedded mode
codepen icon
External Link Icon
expand codeexpand code
Delay
codepen icon
External Link Icon
expand codeexpand code
Progress
codepen icon
External Link Icon
expand codeexpand code
5.18.0
Size
codepen icon
External Link Icon
expand codeexpand code
Customized description
codepen icon
External Link Icon
expand codeexpand code
Custom spinning indicator
codepen icon
External Link Icon
expand codeexpand code
Fullscreen
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.