本文主要是介绍uView LoadingIcon 加载动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
此组件为一个小动画，目前用在uView的loadMore加载更多等组件的正在加载状态场景。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
通过mode设定动画的类型，circle为圆圈的形状，flower为经典类似花朵的形状
<template><view><u-loading-icon></u-loading-icon></view>
</template>
copy
#动画文字
text可以指定文字内容 textSize可以指定文字大小
<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
copy
#模式类型
mode可以指定模式
<u-loading-icon text="花朵形"></u-loading-icon>
<u-loading-icon mode="semicircle" text="半圆"></u-loading-icon>
<u-loading-icon mode="circle" text="圆型"></u-loading-icon>
copy
#排列类型
vertical可以指定文字和图标是否垂直排列
<u-loading-icon :vertical="true"></u-loading-icon>
copy
#动画模式
timing-function可以指定mode为semicircle或circle时动画里css中animation-timing-function的属性，默认为ease-in-out
<u-loading-icon timing-function="linear"></u-loading-icon>
copy
#动画运行时间
duration可以指定动画的运行周期时间
<u-loading-icon duration="2000"></u-loading-icon>
copy
#图标颜色
color可以指定动画活动区域的颜色, inactive-color可以制定mode为circle时的暗边颜色
<u-loading-icon color="red"></u-loading-icon><u-loading-icon mode="circle" inactive-color="red"></u-loading-icon>
copy
#图标尺寸
通过size设定尺寸，单位rpx，组件内把size值体现为组件的宽和高
<u-loading-icon size="36"></u-loading-icon>
copy
#显示或隐藏动画
通过show设置为true或false，来显示或隐藏动画
<u-loading-icon :show="true"></u-loading-icon>/* 等价于 */
<u-loading-icon show></u-loading-icon>这篇关于uView LoadingIcon 加载动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
