Loading 加载动画

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='加载中'>
		<t-card class="mlrt.30" title="Loading" sub-title="显示加载状态,同时支持darw和CSS动画，通过mode设置切换"></t-card>
		<introduction title="drawapi-circular">
			<t-row>
				<t-loading :speed="50" class="mr.15" icon="circular"></t-loading>
				<t-loading class="mr.15" icon="circular" type="success"></t-loading>
				<t-loading class="mr.15" icon="circular" type="error"></t-loading>
				<t-loading class="mr.15" icon="circular" type="primary"></t-loading>
				<t-loading class="mr.15" icon="circular" type="warning"></t-loading>
				<t-loading class="mr.15" icon="circular" color="blue"></t-loading>
			</t-row>
		</introduction>
		<introduction title="drawapi花瓣">
			<t-row style="transform: scale(0.5);">
				<t-loading :speed="50" class="mr.15-s.80" icon="spinner"></t-loading>
				<t-loading class="mr.15-s.160" icon="spinner" type="success"></t-loading>
				<t-loading class="mr.15-s.80" icon="spinner" type="error"></t-loading>
				<t-loading class="mr.15-s.80" icon="spinner" type="primary"></t-loading>
				<t-loading class="mr.15-s.80" icon="spinner" type="warning"></t-loading>
				<t-loading class="mr.15-s.80" :speed="60" icon="spinner"></t-loading>
			</t-row>
		</introduction>

		<introduction title="icon实现">
			<t-row>
				<t-loading class="mr.15" mode='icon' icon="moments"></t-loading>
				<t-loading class="mr.15" mode='icon' icon="moments" type="success"></t-loading>
				<t-loading class="mr.15" mode='icon' icon="moments" type="error"></t-loading>
				<t-loading class="mr.15" mode='icon' icon="moments" type="primary"></t-loading>
				<t-loading class="mr.15" mode='icon' icon="moments" type="warning"></t-loading>
			</t-row>
		</introduction>
		<introduction title="设置图标大小">
			<t-row>
				<t-loading mode='icon' icon="setting" class="s.80-mr.15"></t-loading>
				<t-loading mode='icon' icon="setting" class="s.80-mr.15" type="success"></t-loading>
				<t-loading mode='icon' icon="setting" class="s.80-mr.15" type="error"></t-loading>
				<t-loading mode='icon' icon="setting" class="s.80-mr.15" type="primary"></t-loading>
				<t-loading mode='icon' icon="setting" class="s.80-mr.15" type="warning"></t-loading>
			</t-row>
		</introduction>
		<introduction title="自定义颜色">
			<t-row>
				<t-loading mode='icon' icon="setting-fill" class="s.50-c.#ff557f-mr.15" type="warning"></t-loading>
				<t-loading class="mr.15-s.80-c.blue" icon="circular" type="success"></t-loading>
				<t-loading class="mr.15-s.80-c.blue" icon="spinner" type="error"></t-loading>
			</t-row>
		</introduction>
		<introduction title="设置图标">
			<t-row>
				<t-loading mode='icon' class="mr.15" icon="moments"></t-loading>
				<t-loading mode='icon' class="mr.15" icon="moments" type="success"></t-loading>
				<t-loading mode='icon' class="mr.15" icon="moments" type="error"></t-loading>
				<t-loading mode='icon' class="mr.15" icon="moments" type="primary"></t-loading>
				<t-loading mode='icon' class="mr.15" icon="moments" type="warning"></t-loading>
			</t-row>
		</introduction>
	</t-page>
</template>

Props

名称	描述	类型	默认值	可选值
mode	图标模式	String	'draw'	'draw', 'icon'
icon	图标名称	String	'reload'	-
speed	图标旋转速度	Number	24	-
spinnerClass	加载动画样式类名	String	''	-

Events

事件名	描述	回调参数	版本
-	-	-	-