Loading 加载动画

此组件为一个小动画，目前用在FusionsUi的loadingmore加载更多和switch开关等组件的正在加载状态场景。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 mode 属性设置动画类型，默认值为 flower 可选值：

• circle 圆圈形状
• semicircle 半圆形状
• flower 经典类似花朵的形状
• over 翻转效果

<template>
    <!-- 圆圈形状 -->
    <fu-loading mode="circle"></fu-loading>

    <!-- 半圆形状 -->
    <fu-loading mode="semicircle"></fu-loading>

    <!-- 翻转效果 -->
    <fu-loading mode="over"></fu-loading>
</template>

设置动画颜色

通过 color 属性设置动画颜色，默认值为 #a5a6a8

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

设置动画尺寸

通过 size 属性设置动画尺寸，默认值为 20

<fu-loading size="30"></fu-loading>

设置显示或隐藏动画

通过 show 属性设置为 true 或 false 来显示或隐藏动画，默认值为 true

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

<!-- 等价于 -->
<fu-loading show></fu-loading>

设置动画执行时间

通过 duration 属性设置动画执行时间，默认值为 1200

<fu-loading duration="2500"></fu-loading>

API

Loading Props

属性名	说明	类型	默认值	可选值
mode	动画类型，详见上方基础用法	String	flower	-
show	是否显示动画	Boolean	true	false
color	动画颜色	String	#a5a6a8	-
size	动画尺寸	String｜Number	20	-
duration	动画执行时间	String｜Number	1200	-
inactiveColor	暗边颜色（仅mode=circle时有效）	String	-	-
timingFunction	动画模式	String	linear	-
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	String｜Object	-	-