加载动画

用于页面加载动画效果展示，加载完毕之后把animation参数设置为false关闭loading动画

作者：chenxuyun

一、安装

npm i cxy-loading-animation

或

yarn add cxy-loading-animation

二、引入

在vue项目的入口文件 main.js 中：

import cxyLoadingAnimation from 'cxy-loading-animation'
import 'cxy-loading-animation/style/cxy-loading-animation.css'

Vue.use(cxyLoadingAnimation)

三、基本使用

<cxyLoadingAnimation :animation="true" />

四、关键词备注

animation: 必传参数, 为 true时展示动画, false关闭动画

bagColor: 可选参数, 动画背景颜色, 和生成动态sapn元素个数

duration: 可选参数, 默认值为1.2, 值越小, 动得越快, 反之越慢

完整用法如下

<cxyLoadingAnimation :animation="true" :bagColor="['red','yellow','#820d41','#137b3e','#c0b711']" :duration="1.3"/>

组件效果

https://www.52luntan.xyz/vue_blog_2.0/php/upload/1665212341cursor1.gif