Spin - Svelte - Semi Design Next

Demos

How to import

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

Basic usage

基本的加载器

Code

<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

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

size: small

size: middle

size: large

Code

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

With Description

Use the tip snippet to set the description texts when Spin is used as a wrapping element; the wrapped content is the children snippet, written inside the Spin tag.

加载中...

这里是一些文字。

还有更多文字正在路上。

Code

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

Customized Indicator

Use the indicator snippet to customize Spin's indicator style.

自定义指示符的加载器

Code

<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

Delayed to display Spin.

Code

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

Controlled

Use spinning to determine if the component is in loading status

Code

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

Props

Property	Description	Type	Default
children	Wrapped content. With content, Spin acts as a wrapper and carries `aria-busy` while loading, and the content cannot be focused or operated (inert).	`Snippet`	-
childStyle	Style string of the inner children element.	`string`	-
delay	Delay in milliseconds before the loading effect is shown.	`number`	`0`
indicator	Snippet for a custom loading indicator.	`Snippet`	-
size	Component size.	`SpinSize`	`"middle"`
spinning	Whether it is loading.	`boolean`	`true`
tip	Snippet for the description text, used when Spin acts as a wrapper.	`Snippet`	-
wrapperClassName	Class name of the wrapper element.	`string`	-

class, style 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;
}
```