Loading 加载

手机扫码预览

01:50



---

组件名：rice-loading

用于表示加载中的过渡状态。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 mode 属性设置加载的类型

<rice-loading />
<rice-loading mode="circle" />
<rice-loading mode="semicircle" />
<rice-loading mode="snow" />

自定义颜色

通过 color 属性可以修改颜色

<rice-loading color="#ed6a0c" />
<rice-loading color="#67c23a" mode="circle" />
<rice-loading color="#ee0a24" mode="semicircle" />
<rice-loading color="#e6a23c" mode="snow" />

自定义大小

通过 size 属性可以设置加载图标的大小

<rice-loading size="28" />

动画类型

通过 timing-function 可以设置加载动画的类型，mode 为 circle 和 semicircle 时才有效

<rice-loading mode="circle" timing-function="linear" />
<rice-loading mode="semicircle" timing-function="linear" />

加载文案

通过 text 属性设置加载文案

<rice-loading text="加载中…" />
<rice-loading vertical>加载中…</rice-loading>

自定义文案颜色和大小

<rice-loading mode="circle" vertical text="加载中…" color="#fd5530" text-color="#fd5530" text-size="12px" />

自定义图标

<rice-loading mode="circle" timing-function="ease-in" :duration="1500">
  <template #icon>
    <rice-icon name="star" size="26" color="#ee0a24" />
  </template>
</rice-loading>

API

Props

属性名	类型	说明	默认值
mode	String	类型，可选值：circular、snow、semicircle、circle	circular
duration	Number	过渡时间，单位ms	1000
color	String	颜色	-
inactive-color	String	图标的暗边颜色, mode为circle 模式有效	-
size	String|Number	加载图标大小	24px
text	String|Number	加载文字	-
text-color	String	文字颜色	-
text-size	String| Number	文字大小	14px
vertical	Boolean	是否垂直排列图标和文字内容 默认false	-
timing-function	String	指定animation-timing-function的css属性，mode为circle或semicircle时有效	ease-in-out
custom-style	Object	自定义style	-

TimingFunction Options

属性值	说明
ease	缓入快出（结束时减速）
ease-in	仅缓入（开始慢，逐渐加速）
ease-out	仅缓出（开始快，逐渐减速）
ease-in-out	缓入缓出（两头慢，中间快）
linear	匀速运动

Slots

名称	说明
default	加载文案
icon	加载图标

类型定义

组件导出如下类型

import {LoadingMode, LoadingTimingFunction,LoadingProps } from '@/uni_modules/rice-ui'
// 组件类型
const loadingRef = ref<RiceLoadingComponentPublicInstance | null>(null)