logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
basic Usage
Size
Inside a container
Embedded mode
Customized description
delay
Custom spinning indicator
API
Static Method
Design Token

Spin

    • SkeletonWatermark

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu 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 Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    A spinner for displaying loading state of a page or a section.

    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

    A simple loading status.

    expand codeexpand code
    Inside a container

    Spin in a container.

    expand codeexpand code
    Customized description
    expand codeexpand code
    Custom spinning indicator

    Use custom loading indicator.

    expand codeexpand code
    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.

    expand codeexpand code
    Embedded mode

    Embedding content into Spin will set it into loading state.

    expand codeexpand code
    delay

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

    expand codeexpand code

    API

    Common props ref：Common props

    PropertyDescriptionTypeDefault
    delaySpecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
    indicatorReact node of the spinning indicatorReactNode-
    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 Token

    Global Token

    Loading
    Loading
    Loading
    Loading...
    Alert message title
    Further details about the context of this alert.
    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：