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

基本案例

默认支持三种基本模式：默认模式、circle模式、circle-dots模式和semicircle模式

<un-loading></un-loading>
<un-loading mode="circle"></un-loading>
<un-loading mode="circle-dots"></un-loading>
<un-loading mode="semicircle"></un-loading>

使用主题色

通过type属性可以指定不同的主题色，支持primary、error、info、warning、success等。

<!-- 默认模式主题色 -->
<un-loading type="primary"></un-loading>
<un-loading type="error"></un-loading>
<un-loading type="info"></un-loading>
<un-loading type="warning"></un-loading>
<un-loading type="success"></un-loading>

<!-- circle模式主题色 -->
<un-loading mode="circle" type="primary"></un-loading>
<un-loading mode="circle" type="error"></un-loading>
<un-loading mode="circle" type="info"></un-loading>
<un-loading mode="circle" type="warning"></un-loading>
<un-loading mode="circle" type="success"></un-loading>

<!-- circle-dots模式主题色 -->
<un-loading mode="circle-dots" type="primary"></un-loading>
<un-loading mode="circle-dots" type="error"></un-loading>
<un-loading mode="circle-dots" type="info"></un-loading>
<un-loading mode="circle-dots" type="warning"></un-loading>
<un-loading mode="circle-dots" type="success"></un-loading>

<!-- semicircle模式主题色 -->
<un-loading mode="semicircle" type="primary"></un-loading>
<un-loading mode="semicircle" type="error"></un-loading>
<un-loading mode="semicircle" type="info"></un-loading>
<un-loading mode="semicircle" type="warning"></un-loading>
<un-loading mode="semicircle" type="success"></un-loading>

自定义颜色

通过color属性可以自定义动画活动区域的颜色，inactiveColor可以设置circle模式时的暗边颜色。

<!-- 默认模式自定义颜色 -->
<un-loading color="#19be6b" mode="spinner"></un-loading>

<!-- circle模式自定义颜色 -->
<un-loading color="#19be6b" inactiveColor="#acf7d2" mode="circle"></un-loading>

<!-- circle-dots模式自定义颜色 -->
<un-loading color="#19be6b" mode="circle-dots"></un-loading>

<!-- semicircle模式自定义颜色 -->
<un-loading color="#19be6b" mode="semicircle"></un-loading>

自定义图标 v4.1.0

通过mode="custom"结合icon属性可以使用自定义图标。

<un-loading mode="custom" icon="reload" type="primary"></un-loading>
<un-loading mode="custom" icon="refresh" type="primary"></un-loading>

使用插槽自定义图标 v4.1.0

通过默认插槽可以更灵活地自定义loading图标，支持使用un-icon组件或远程图片或base64编码图片。

<!-- 使用un-icon组件 -->
<un-loading mode="custom">
    <un-icon name="hourglass-half-fill" size="25" type="error"></un-icon>
</un-loading>

<!-- 使用远程图片 -->
<un-loading>
    <un-icon name="https://uview-unix.d3u.cn/web/static/uview/menu/3.png" size="40"></un-icon>
</un-loading>
<un-loading>
    <un-icon name="https://uview-unix.d3u.cn/web/static/uview/menu/12.png" size="40"></un-icon>
</un-loading>

自定义文字

通过text属性可以添加加载文字。

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

垂直排列

通过vertical属性可以让图标和文字垂直排列。

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

API

Props

参数	说明	类型	默认值
show	是否显示动画 4.1.0已废弃	Boolean	true
color	图标颜色，支持使用主题色	String	-
textColor	提示文本颜色，支持使用主题色	String	-
vertical	图标和文字是否垂直排列	Boolean	false
mode	模式选择	Enum	spinner
icon v4.1.0	自定义图标名称，参考 un-icon 组件, 支持图片, mode为custom时有效	String	-
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
customStyle v4.1.0	自定义样式	String | Object	-

Slots v4.1.0

名称	说明
default	自定义loading图标
text	自定义loading文字

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 变量使用 文档