加载器 Spin - Svelte - Semi Design Next

代码演示

如何引入

<script lang="ts">
    import { Spin } from '@fibrae/semi-ui-svelte';
</script>

基本用法

基本的加载器

代码

<script lang="ts">
    import { Spin } from '@fibrae/semi-ui-svelte';
</script>

<div style="margin-left: 30px">
    <div style="margin-bottom: 10px">基本的加载器</div>
    <Spin />
</div>

尺寸

组件定义了三种尺寸：大、中（默认）、小。

size: small

size: middle

size: large

代码

<script lang="ts">
    import { Spin } from '@fibrae/semi-ui-svelte';
</script>

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

带文字的

通过 tip snippet 可设置当 Spin 用作包裹元素时的文字，被包裹的内容写在 Spin 标签内，即 children snippet。

加载中...

这里是一些文字。

还有更多文字正在路上。

代码

<script lang="ts">
    import { Spin } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Spin>
        {#snippet tip()}加载中...{/snippet}
        <div style="border: 1px solid var(--semi-color-primary); border-radius: 4px; padding-left: 8px">
            <p>这里是一些文字。</p>
            <p>还有更多文字正在路上。</p>
        </div>
    </Spin>
</div>

自定义指示符

可以通过 indicator snippet 自定义 Spin 的指示符样式。

自定义指示符的加载器

代码

<script lang="ts">
    import { IconLoading } from '@fibrae/semi-icons-svelte';
    import { Spin } from '@fibrae/semi-ui-svelte';
</script>

<div style="margin-left: 30px">
    <div>自定义指示符的加载器</div>
    <Spin>
        {#snippet indicator()}
            <IconLoading />
        {/snippet}
    </Spin>
</div>

延迟显示

通过 delay 设置延迟显示 loading 的效果
组件是否处于 loading 状态由传入的 spinning 值决定，loading 为受控属性

代码

<script lang="ts">
    import { Button, Spin } from '@fibrae/semi-ui-svelte';

    let loading = $state(false);
</script>

<div>
    <Button style="margin-right: 20px" onclick={() => (loading = !loading)}>延迟显示的 Spin</Button>
    <Spin delay={1000} spinning={loading} />
</div>

受控

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

代码

<script lang="ts">
    import { Button, Spin } from '@fibrae/semi-ui-svelte';

    let loading = $state(false);
</script>

<div>
    <Button style="margin-right: 20px" onclick={() => (loading = !loading)}>受控的 Spin</Button>
    <Spin spinning={loading} />
</div>

API 参考

Props

属性	说明	类型	默认值
children	被包裹的内容；有内容时 Spin 作为包裹元素，加载期间带 `aria-busy`，且内容不可聚焦、不可操作（inert）。	`Snippet`	-
childStyle	内部子元素的样式字符串。	`string`	-
delay	延迟显示加载效果的时间，单位毫秒。	`number`	`0`
indicator	自定义加载指示符的 snippet。	`Snippet`	-
size	组件大小。	`SpinSize`	`"middle"`
spinning	是否处于加载中的状态。	`boolean`	`true`
tip	当 Spin 作为包裹元素时，描述文字的 snippet。	`Snippet`	-
wrapperClassName	包裹元素的类名。	`string`	-

class、style 与原生属性和事件落在根元素 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;
}
```