zx-loading-icon 加载动画

介绍

一个简洁的加载动画组件，用于在加载更多内容、开关切换等场景中展示正在加载的状态。

平台兼容性

全平台兼容（App、H5、微信小程序等）

基础用法

<zx-loading-icon mode="circle"></zx-loading-icon>

不同模式

组件提供三种模式：circle（圆形）、spinner（花朵形）、semicircle（半圆形）

<!-- 圆形加载动画 -->
<zx-loading-icon mode="circle"></zx-loading-icon>

<!-- 花朵形加载动画 -->
<zx-loading-icon mode="spinner"></zx-loading-icon>

<!-- 半圆形加载动画 -->
<zx-loading-icon mode="semicircle"></zx-loading-icon>

自定义颜色和大小

<!-- 自定义颜色 -->
<zx-loading-icon color="#3c9cff"></zx-loading-icon>

<!-- 自定义大小 -->
<zx-loading-icon size="80rpx"></zx-loading-icon>

<!-- 设置非激活边框颜色 -->
<zx-loading-icon mode="circle" color="#3c9cff" inactiveColor="#e4e4e4"></zx-loading-icon>

显示文字

<!-- 水平排列 -->
<zx-loading-icon text="加载中"></zx-loading-icon>

<!-- 垂直排列 -->
<zx-loading-icon text="加载中" vertical></zx-loading-icon>

<!-- 自定义文字样式 -->
<zx-loading-icon text="加载中" textSize="28rpx" textColor="#3c9cff"></zx-loading-icon>

自定义动画

<!-- 自定义动画速度 -->
<zx-loading-icon duration="800"></zx-loading-icon>

<!-- 自定义动画函数 -->
<zx-loading-icon timingFunction="linear"></zx-loading-icon>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | show | 是否显示组件 | Boolean | true | | color | 动画活动区域的颜色 | String | #ffffff | | textColor | 提示文本的颜色 | String | #909193 | | vertical | 文字和图标是否垂直排列 | Boolean | false | | mode | 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形 | String | circle | | size | 加载图标的大小，单位默认rpx | String / Number | 60rpx | | textSize | 文字大小 | String / Number | 30rpx | | text | 文字内容 | String / Number | '' | | timingFunction | 动画模式 | String | ease-in-out | | duration | 动画执行周期时间(ms) | String / Number | 1200 | | inactiveColor | mode=circle时的暗边颜色 | String | transparent |

示例项目

更多示例和详细用法请参考：https://zxui.org/components/loading-icon