Spin - Semi Design Next

Demos

How to import

import { Spin } from '@fibrous/semi-ui-react';

Basic usage

A basic spin.

Code

import { Spin } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    return (
        <div style={{ marginLeft: 30 }}>
            <div style={{ marginBottom: 10 }}>A basic spin.</div>
            <Spin />
        </div>
    );
}

Size

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

size: small

size: middle

size: large

Code

import { Spin } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    return (
        <div style={{ marginLeft: 30 }}>
            <div style={{ marginBottom: 5 }}>size: small</div>
            <Spin size="small" />
            <br />
            <br />
            <div style={{ marginBottom: 10 }}>size: middle</div>
            <Spin size="middle" />
            <br />
            <br />
            <div style={{ marginBottom: 15 }}>size: large</div>
            <Spin size="large" />
        </div>
    );
}

With Description

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

I am loading...

Here are some texts.

And more texts on the way.

Code

import { Spin } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    return (
        <div>
            <Spin tip="I am loading...">
                <div
                    style={{
                        border: '1px solid var(--semi-color-primary)',
                        borderRadius: '4px',
                        paddingLeft: '8px',
                    }}
                >
                    <p>Here are some texts.</p>
                    <p>And more texts on the way.</p>
                </div>
            </Spin>
        </div>
    );
}

Customized Indicator

Use indicator property to customize Spin's indicator style.

A spin with customized indicator.

Code

import { IconLoading } from '@fibrous/semi-icons-react';
import { Spin } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    return (
        <div style={{ marginLeft: 30 }}>
            <div>A spin with customized indicator.</div>
            <Spin indicator={<IconLoading />} />
        </div>
    );
}

Delay

Delayed to display Spin.

Code

import { useState } from 'react';
import { Spin, Button } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    const [loading, toggleLoading] = useState(false);

    const toggle = () => {
        toggleLoading(!loading);
    };
    return (
        <div>
            <Button onClick={toggle} style={{ marginRight: 20 }}>
                延迟显示的spin
            </Button>
            <Spin delay={1000} spinning={loading} />
        </div>
    );
}

Controlled

Use spinning to determine if the component is in loading status

Code

import { useState } from 'react';
import { Spin, Button } from '@fibrous/semi-ui-react';

export default function SpinDemo() {
    const [loading, toggleLoading] = useState(false);

    const toggle = () => {
        toggleLoading(!loading);
    };
    return (
        <div>
            <Button onClick={toggle} style={{ marginRight: 20 }}>
                受控的 Spin
            </Button>
            <Spin spinning={loading} />
        </div>
    );
}

API Reference

Props

Property	Description	Type	Default
children	Content to wrap. With content, Spin acts as a wrapper; while loading, the content is `inert` and cannot be focused or operated.	`React.ReactNode`	-
childStyle	Inline style of the inner children element.	`React.CSSProperties`	-
delay	Delay in milliseconds before the loading effect is shown.	`number`	`0`
indicator	Custom loading indicator, a ReactNode. When not set, the built-in loading icon is shown, which the global indicator config can override.	`React.ReactNode`	-
ref	Reference to the root `div` element.	`Type`	-
size	Component size: `small`, `middle` or `large`.	`SpinSize`	`"middle"`
spinning	Whether it is loading. This is a controlled property.	`boolean`	`true`
style	Inline style of the root element.	`React.CSSProperties`	-
tip	Description text shown below the indicator while loading, often used when Spin wraps content. A ReactNode.	`React.ReactNode`	-
wrapperClassName	Extra class name added to the root element, together with `className`.	`string`	-

Other native attributes (such as id, aria-* and onClick) land on the root div element.

While a Spin that wraps content is loading, the wrapped content is inert: it cannot be focused or operated, and the root carries aria-busy. If focus was inside the wrapped content, it moves to the Spin root first and returns to the original element when loading ends.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-spin_wrapper-spin	600ms	加载图标容器旋转一周时长
$animation_duration-spin_customChildren-spin	1600ms	自定义指示器时旋转一周时长
$color-spin-bg	var(--semi-color-primary)	加载图标背景颜色
$width-spin_large	32px	加载图标尺寸 - 大
$width-spin_middle	20px	加载图标尺寸 - 中
$width-spin_small	14px	加载图标尺寸 - 小
$opacity-spin_children	0.5	加载图标透明度

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 override the original color by adding the color property to the .semi-spin-wrapper class (it is recommended to override with a higher weight).
```
.custom .semi-spin-wrapper {
  color: red;
}
```