Feedback · Spin
Spin is used to inform the user that the content is loading and may take an uncertain period of time.


How to import

Basic usage


Supports three sizes: large, medium (default), and small.

With Description

Use tip to set the description texts when Spin is used as a wrapping element

Customized Indicator

Use indicator property to customize Spin's indicator style.


Delayed to display Spin.


Use spinning to determine if the component is in loading status

API Reference

childStyleInline style for children element v>=1.0.0CSSProperties-
delayDelay timing to display Spinnumber(ms)0
sizeSize, one of small, middle, largestringmiddle
spinningToggle whether it is in loadingbooleantrue
styleInline styleCSSProperties-
tipDescription texts when Spin is used as a wrapping elementReactNode-
wrapperClassNameClass name of wrapping elementstring-

Design Tokens

Content Guidelines

  • Precisely state the loading status, using words such as "Loading", "Submitting", "Processing", etc.
  • Use as few words as possible to describe the state


  • How to modify the color of the spin icon?
    You can overwrite the original color by adding a color property to the .semi-spin-wrapper class.