Spin

Used for the loading status of a page or a block.

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.

Embedded mode

Embedding content into Spin will set it into loading state.

Delay

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

Progress

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

Fullscreen

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

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

Customized description

Customize the description text.

Custom spinning indicator

Use custom loading indicator.

Custom semantic dom styling

You can customize the semantic dom style of Spin by passing objects/functions through classNames and styles.

API

Spin are exported from @ceebee/ui/client.

Spin

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>`	`-`	—
`delay`	Specifies a delay in milliseconds for loading state (prevent flush)	`number (milliseconds)`	`-`	—
`description`	Customize description content	`ReactNode`	`-`	6.3.0
`fullscreen`	Display a backdrop with the Spin component	`boolean`	`false`	5.11.0
`indicator`	React node of the spinning indicator	`ReactNode`	`-`	—
`percent`	The progress percentage, when set to auto, it will be an indeterminate progress	`number \| 'auto'`	`-`	5.18.0
`size`	The size of Spin, options: small, medium and large	`string`	`medium`	—
`spinning`	Whether Spin is visible	`boolean`	`true`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>`	`-`	—
`tip`	Customize description content when Spin has children. Deprecated, use description instead	`ReactNode`	`-`	—
`wrapperClassName`	The className of wrapper when Spin has children. Deprecated, use classNames.root instead	`string`	`-`	—