介绍

表示处理中的状态。

引入

import Button from 'sard-uniapp/components/loading/loading.vue'

代码演示

基础使用

<template>
  <sar-loading />
</template>

加载类型

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

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

加载文案

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

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

垂直排布

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

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

加载尺寸

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

<template>
  <sar-loading size="48rpx" text-size="36rpx" text="加载中" />
</template>

自定义颜色

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

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

自定义图标

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

<template>
  <sar-loading size="48rpx">
    <template #circular>
      <sar-icon family="demo-icons" name="arrow-clockwise"></sar-icon>
    </template>
  </sar-loading>
</template>

API

LoadingProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
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 变量

page,
.sar-portal {
  --sar-loading-icon-animation-duration: 0.8s;

  --sar-loading-scale-width: 9.38%;
  --sar-loading-scale-min-width: 2px;
  --sar-loading-scale-scale-x: 0.75;
  --sar-loading-scale-height: 28%;
  --sar-loading-scale-border-radius: 40%;

  --sar-loading-text-margin-left: 16rpx;
  --sar-loading-text-vertical-margin-top: 16rpx;
}