# t-loading

Loading 加载

t-loading 组件介绍

加载动画组件，显示加载状态，同时支持draw和CSS动画，通过mode设置切换。

t-loading 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-loading 基础用法

基础用法参考 demo/loading/loading.uvue，支持图标与颜色定制。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Loading"
				sub-title="显示加载状态(停止维护更新，请使用官方loading，官方loading独立线程运行动画不会阻塞渲染)"></t-card>
		<introduction title="icon实现">
			<t-row :class="[`tvg trm tpm`]">
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="cube"
						   type="success"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="close-circle-line"
						   type="error"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="primary"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="warning"></t-loading>
			</t-row>
		</introduction>
		<introduction title="设置图标大小(有些字体无法居中需要通过设置行高,例:s-30! slh-38)">
			<t-row :class="[`tvg trm tpm`]">
				<t-loading name="setting"
						   class="mr-10"
						   icon-class="s-30!"></t-loading>
				<t-loading name="setting"
						   class="mr-10"
						   icon-class="s-30!"
						   type="success"></t-loading>
				<t-loading name="setting"
						   class="mr-10"
						   icon-class="s-30!"
						   type="error"></t-loading>
				<t-loading name="setting"
						   class="mr-10"
						   icon-class="s-30!"
						   type="primary"></t-loading>
				<t-loading name="setting"
						   class="mr-10"
						   icon-class="s-30!"
						   type="warning"></t-loading>
			</t-row>
		</introduction>
		<introduction title="自定义颜色">
			<t-row :class="[`tvg trm tpm`]">
				<t-loading name="setting"
						   icon-class="s-30! c-#ff557f!"
						   type="warning"></t-loading>
			</t-row>
		</introduction>
		<introduction title="设置图标"
					  class="mb-25 mlr-15">
			<t-row :class="[`tvg trm tpm`]">
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="success"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="error"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="primary"></t-loading>
				<t-loading icon-class="s-30!"
						   class="mr-10"
						   name="moments"
						   type="warning"></t-loading>
			</t-row>
		</introduction>
	</view>
</template>

t-loading Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
name	String	"loader-2-fill"	动画图标名称	-
iconClass	String	""	动画图标的样式	-

t-loading Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	NodeInfo