Skip to content
12:13

TnLoading-加载图标

此组件是一个加载动画的图标

组件位置

typescript
import TnLoading from '@tuniao/tnui-vue3-uniapp/components/loading/src/loading.vue'
import TnLoading from '@tuniao/tnui-vue3-uniapp/components/loading/src/loading.vue'
typescript
import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'
import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

基础使用

  • mode设置加载图标的模式,默认为circle4/1 圆环,可选值flower花朵加载、semicircle带第 4/1 圆环
  • type值可选的有primarysuccesswarningdangerinfo,默认为primary,即默认加载图标颜色
  • color可以设置加载图标的颜色,不可以使用内置的渐变颜色
  • size参数来修改加载图标的大小,可选值为smlgxl,也可以传递指定的大小尺寸,默认单位为 rpx,接受传入带单位的参数
vue
<TnLoading show type="primary" />
<TnLoading show type="success" />
<TnLoading show type="warning" />
<TnLoading show type="danger" />
<TnLoading show type="info" />
<TnLoading show type="primary" />
<TnLoading show type="success" />
<TnLoading show type="warning" />
<TnLoading show type="danger" />
<TnLoading show type="info" />
vue
<TnLoading show mode="circle" />
<TnLoading show mode="flower" />
<TnLoading show mode="semicircle" />
<TnLoading show mode="circle" />
<TnLoading show mode="flower" />
<TnLoading show mode="semicircle" />
vue
<TnLoading show color="tn-blue" />
<TnLoading show color="#01beff" />
<TnLoading show color="rgb(1, 190, 255)" />
<TnLoading show color="tn-blue" />
<TnLoading show color="#01beff" />
<TnLoading show color="rgb(1, 190, 255)" />
vue
<TnLoading show size="sm" />
<TnLoading show size="30" />
<TnLoading show size="40px" />
<TnLoading show size="sm" />
<TnLoading show size="30" />
<TnLoading show size="40px" />

控制加载图标的显示与动画

  • 通过show参数控制加载图标的显示与隐藏
  • 通过animation参数控制加载图标的动画
vue
<TnLoading show animation />
<TnLoading show animation />

控制加载图标动画的时间和执行函数

  • 通过duration参数控制加载图标动画的时间
  • 通过time-function参数控制加载图标动画的执行函数

这两个参数仅在modecirclesemicircle时有效

vue
<TnLoading show animation duration="3" time-function="ease-in-out" />
<TnLoading show animation duration="3" time-function="ease-in-out" />

API

Props

属性名说明类型默认值可选值
show是否显示加载图标Booleanfalsetrue
animation是否显示加载图标动画Booleanfalsetrue
mode加载图标的模式Stringcirclecircleflowersemicircle
type加载图标的颜色为主题色Stringprimaryprimarysuccesswarningdangerinfo
color加载图标的颜色,可以使用图鸟内置(不包含渐变色)的背景色、hex、rgb、rgbaString--
size加载图标的大小,可选值为smlgxl,也可以传递指定的大小尺寸,默认单位为 rpx,接受传入带单位的参数String | Number--
duration加载图标动画的时间,单位为秒,仅在modecirclesemicircle时有效String | Number--
time-function加载图标动画的执行函数,仅在modecirclesemicircle时有效String--

Tuniao UI