此组件为一个小动画，目前用在uView的loadMore加载更多等组件的正在加载状态场景。

基本使用

通过mode设定动画的类型，circle为圆圈的形状，flower为经典类似花朵的形状

<un-loading></un-loading>

动画文字

text可以指定文字内容 textSize可以指定文字大小

<un-loading text="加载中" textSize="18"></un-loading>

模式类型

mode可以指定模式为circle、spinner、spinner-image、semicircle

spinner-image 和spinner效果一样，区别是spinner-image是使用图片实现（不支持改变颜色），spinner使用view实现，spinner-image性能优于spinner

<un-loading text="花朵形"></un-loading>
<un-loading mode="semicircle" text="半圆"></un-loading>
<un-loading mode="circle" text="圆型"></un-loading>

排列类型

vertical可以指定文字和图标是否垂直排列

<un-loading :vertical="true"></un-loading>

动画模式

timing-function可以指定mode为semicircle或circle时动画里css中animation-timing-function的属性，默认为ease-in-out

<un-loading timing-function="linear"></un-loading>

动画运行时间

duration可以指定动画的运行周期时间

<un-loading duration="2000"></un-loading>

图标颜色

color可以指定动画活动区域的颜色, inactive-color可以制定mode为circle时的暗边颜色

<un-loading color="red"></un-loading>

<un-loading mode="circle" inactive-color="red"></un-loading>

图标尺寸

通过size设定尺寸，单位rpx，组件内把size值体现为组件的宽和高

<un-loading size="36"></un-loading>

显示或隐藏动画

通过show设置为true或false，来显示或隐藏动画

<un-loading :show="true"></un-loading>

/* 等价于 */
<un-loading show></un-loading>

API

Props

参数	说明	类型	默认值
show	是否显示动画	Boolean	true
color	图标颜色，支持使用主题色	String	-
textColor	提示文本颜色，支持使用主题色	String	-
vertical	图标和文字是否垂直排列	Boolean	false
mode	模式选择，见上方说明	Enum	spinner-image
size	加载图标的大小，单位px	String | Number	24
textSize	加载文字的大小，单位px	String | Number	15
text	文字内容	String	-
timingFunction	指定animation-timing-function的css属性，但只支持mode为circle或semicircle才有效	String	ease-in-out
duration	动画执行周期时间，单位ms	string | Number	1200
inactiveColor	图标的暗边颜色, mode为circle 模式有效	String	transparent

Scss 变量

变量名	默认值	说明
$un-loading-color	#c8c9cc	加载动画颜色
$un-loading-text-margin-left	6px	加载动画文字左边距
$un-loading-text-margin-top	8px	加载动画文字上边距
$un-loading-text-color	$text-color-muted	加载动画文字颜色
$un-loading-text-font-size	$text-base	加载动画文字大小
$un-loading-text-line-height	$line-base	加载动画文字行高

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档