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

Demos

How to import

Basic usage

Size

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.

Delay

Delayed to display Spin.

Controlled

Use spinning to determine if the component is in loading status

API Reference

PropertiesInstructionstypeDefault
childStyleInline style for children element v>=1.0.0CSSProperties-
delayDelay timing to display Spinnumber(ms)0
indicatorIndicatorsReactNode-
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

FAQ

  • 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.