Spin - Semi Design Next

Demos

How to import

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

Basic usage

A basic spin.

Code

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

export default function SpinDemo() {
    return (
        <div style={{ 'margin-left': '30px' }}>
            <div style={{ 'margin-bottom': '10px' }}>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-solid';

export default function SpinDemo() {
    return (
        <div style={{ 'margin-left': '30px' }}>
            <div style={{ 'margin-bottom': '5px' }}>size: small</div>
            <Spin size="small" />
            <br />
            <br />
            <div style={{ 'margin-bottom': '10px' }}>size: middle</div>
            <Spin size="middle" />
            <br />
            <br />
            <div style={{ 'margin-bottom': '15px' }}>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-solid';

export default function SpinDemo() {
    return (
        <div>
            <Spin tip="I am loading...">
                <div
                    style={{
                        border: '1px solid var(--semi-color-primary)',
                        'border-radius': '4px',
                        'padding-left': '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-solid';
import { Spin } from '@fibrous/semi-ui-solid';

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

Delay

Delayed to display Spin.

Code

import { createSignal } from 'solid-js';
import { Button, Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    const [loading, setLoading] = createSignal(false);

    const toggle = () => {
        setLoading(!loading());
    };

    return (
        <div>
            <Button onClick={toggle} style={{ 'margin-right': '20px' }}>
                延迟显示的spin
            </Button>
            <Spin delay={1000} spinning={loading()} />
        </div>
    );
}

Controlled

Use spinning to determine if the component is in loading status

Code

import { createSignal } from 'solid-js';
import { Button, Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    const [loading, setLoading] = createSignal(false);

    const toggle = () => {
        setLoading(!loading());
    };

    return (
        <div>
            <Button onClick={toggle} style={{ 'margin-right': '20px' }}>
                受控的 Spin
            </Button>
            <Spin spinning={loading()} />
        </div>
    );
}

API Reference

Props

Property	Description	Type	Default
childStyle	Style of the inner children element, an object (kebab-case keys) or a string.	`JSX.CSSProperties \| string`	-
delay	Delay in milliseconds before the loading effect is shown.	`number`	`0`
indicator	Custom loading indicator, passed as a JSX element.	`JSX.Element`	-
size	Component size.	`SpinSize`	`"middle"`
spinning	Whether it is loading.	`boolean`	`true`
tip	Description text when Spin acts as a wrapper, passed as a JSX element.	`JSX.Element`	-
wrapperClassName	Class name of the wrapper element.	`string`	-

class, style, ref and native attributes and events 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;
}
```