介绍

表示处理中的状态。

代码演示

基础使用

<template>
  <s-loading />
</template>

加载类型

使用type属性设置不同类型。

<template>
  <s-loading type="circular" />
  <s-loading type="clock" />
</template>

加载文案

通过text属性或者默认插槽展示文字。

<template>
  <s-loading text="text..."></s-loading>
  <s-loading>slot text...</s-loading>
</template>

垂直排布

通过vertical属性设置图标和文字垂直排布。

<template>
  <s-loading vertical>加载中...</s-loading>
</template>

加载尺寸

size属性设置图标大小，textSize属性设置文字大小。

<template>
  <s-loading size="24px" text-size="18px" text="加载中" />
</template>

自定义颜色

color属性设置图标颜色，textColor属性设置文字颜色。

<template>
  <s-loading color="var(--s-color-primary)" text-color="var(--s-color-primary)" text="加载中" />
</template>

自定义图标

通过 circular 插槽可以自定义加载图标。

<template>
  <s-loading size="24px">
    <template #circular>
      <demo-icon name="arrow-clockwise" />
    </template>
  </s-loading>
</template>

进度

可手动控制加载的进度动画

vue ts

<template>
  <div class="text-2xl">
    <s-loading :animated="false" :progress="progress" type="circular" />
    <s-loading :animated="false" :progress="progress" type="clock" />
    <s-loading :animated="false">
      <template #circular>
        <demo-icon
          name="arrow-clockwise"
          :style="{
            transform: `rotate(${progress * 360}deg)`,
          }"
        />
      </template>
    </s-loading>
  </div>

  <s-slider v-model="progress" :min="0" :max="1" :step="0.01" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const progress = ref(0.5)
</script>

vue js

<template>
  <div class="text-2xl">
    <s-loading :animated="false" :progress="progress" type="circular" />
    <s-loading :animated="false" :progress="progress" type="clock" />
    <s-loading :animated="false">
      <template #circular>
        <demo-icon
          name="arrow-clockwise"
          :style="{
            transform: `rotate(${progress * 360}deg)`,
          }"
        />
      </template>
    </s-loading>
  </div>

  <s-slider v-model="progress" :min="0" :max="1" :step="0.01" />
</template>

<script setup lang="js">
import { ref } from 'vue'
const progress = ref(0.5)
</script>

API

LoadingProps

属性	描述	类型	默认值
type	加载类型	'clock' | 'circular'	'circular'
color	加载颜色	string	-
size	图标尺寸	string	-
text	图标文字	string	-
text-color	文字颜色	string	-
text-size	文字尺寸	string	-
vertical	是否垂直排列图标和文案	boolean	false
animated	是否开启加载动画	boolean	true
progress	当前加载的进度	number	1

LoadingSlots

插槽	描述	属性
default	自定义加载文字内容	-
circular	自定义 circular 类型的图标	-

主题定制

样式变量

CSS 变量	值
--s-loading-text-margin-start	var(--s-size-xs)
--s-loading-text-vertical-margin-top	var(--s-size-xs)