加载器 - Semi Design Next

代码演示

如何引入

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

基本用法

A basic spin.

代码

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: small

size: middle

size: large

代码

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>
    );
}

带文字的

通过 tip 属性可设置当 Spin 用作包裹元素时的文字。

I am loading...

Here are some texts.

And more texts on the way.

代码

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>
    );
}

自定义指示符

可以通过设置 indicator 属性自定义 Spin 的指示符样式。

A spin with customized indicator.

代码

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 设置延迟显示 loading 的效果
组件是否处于 loading 状态由传入的 spinning 值决定，loading 为受控属性

代码

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>
    );
}

受控

通过 spinning 控制组件是否处于 loading 状态

代码

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 参考

Props

属性	说明	类型	默认值
children	被包裹的内容。有内容时 Spin 作为包裹元素，加载中内容带 `inert`，不能聚焦和操作。	`React.ReactNode`	-
childStyle	内部子元素的内联样式。	`React.CSSProperties`	-
delay	延迟显示加载效果的时间，单位毫秒。	`number`	`0`
indicator	自定义加载指示符，传入 ReactNode。未设置时显示内置加载图标，全局配置的 indicator 可覆盖该图标。	`React.ReactNode`	-
ref	根元素（`div`）的引用。	`Type`	-
size	组件大小，可选 `small`、`middle` 或 `large`。	`SpinSize`	`"middle"`
spinning	是否处于加载中的状态，受控属性。	`boolean`	`true`
style	根元素的内联样式。	`React.CSSProperties`	-
tip	加载中显示在指示符下方的描述文字，常在 Spin 作为包裹元素时使用，传入 ReactNode。	`React.ReactNode`	-
wrapperClassName	根元素的额外类名，与 `className` 一并添加到根元素上。	`string`	-

其他原生属性（如 id、aria-*、onClick）落在根元素 div 上。

Spin 作为包裹元素且处于加载中时，被包裹的内容带 inert，不能聚焦和操作，根元素带 aria-busy。焦点原在被包裹内容里时会先移到 Spin 根元素，加载结束后回到原来的元素。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$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	加载图标透明度

文案规范

准确地说明加载状态，使用比如“Loading”, “Submitting”, “Processing”等词
使用尽量少的词汇去描述状态

FAQ

怎么修改 icon 的颜色？

可以通过给 .semi-spin-wrapper 类添加 color 属性覆盖原有的颜色（推荐以更高权重覆盖）
```
.custom .semi-spin-wrapper {
  color: red;
}
```