Spin - Semi Design Next

Demos

How to import

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

Basic usage

A basic spin.

Code

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="margin-left: 30px">
        <div style="margin-bottom: 10px">A basic spin.</div>
        <Spin />
    </div>
</template>

Size

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

size: small

size: middle

size: large

Code

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

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

With Description

Use the #tip slot to set the description texts when Spin is used as a wrapping element; the wrapped content goes in the default slot.

I am loading...

Here are some texts.

And more texts on the way.

Code

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Spin>
            <template #tip>I am loading...</template>
            <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>
</template>

Customized Indicator

Use the #indicator slot to customize Spin's indicator style.

A spin with customized indicator.

Code

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

<template>
    <div style="margin-left: 30px">
        <div>A spin with customized indicator.</div>
        <Spin>
            <template #indicator>
                <IconLoading />
            </template>
        </Spin>
    </div>
</template>

Delay

Delayed to display Spin.

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Spin } from '@fibrous/semi-ui-vue';

    const loading = ref(false);
</script>

<template>
    <div>
        <Button style="margin-right: 20px" @click="loading = !loading">延迟显示的spin</Button>
        <Spin :delay="1000" :spinning="loading" />
    </div>
</template>

Controlled

Use spinning to determine if the component is in loading status

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Spin } from '@fibrous/semi-ui-vue';

    const loading = ref(false);
</script>

<template>
    <div>
        <Button style="margin-right: 20px" @click="loading = !loading">受控的 Spin</Button>
        <Spin :spinning="loading" />
    </div>
</template>

API Reference

Props

Property	Description	Type	Default
size	Component size.	`SpinSize`	`semiDefault("Spin", "size", "middle")`
spinning	Whether it is loading.	`boolean`	`semiDefault("Spin", "spinning", true)`
delay	Delay in milliseconds before the loading effect is shown.	`number`	`semiDefault("Spin", "delay", 0)`
wrapperClassName	Class name of the wrapper element.	`string`	`semiGlobalDefault("Spin", "wrapperClassName")`
childStyle	Style of the inner children element.	`CSSProperties`	`semiGlobalDefault("Spin", "childStyle")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Wrapped content; with a default slot Spin acts as a wrapper and carries aria-busy while loading, and the content cannot be focused or operated (inert).	`any`
indicator	Custom loading indicator.	`any`
tip	Description text, used when Spin acts as a wrapper.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes passed as attrs land on the root 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;
}
```