fake-progress 搭配element ui进度条实现加载特效

1.首先npm下载这个插件   

 npm install fake-progress

2.vue中引入这个插件

import FakeProgress from 'fake-progress'

 3.使用element ui的 Progress 进度条组件

<el-progress type="circle" :percentage="parseInt(fake.progress*100)"></el-progress>

 percentage参数默认为小数，需要将数值乘100进行显示

4.data中定义

 5.在进度条需要开始的地方使用this.fake.start();

 6.在进度条需要结束的地方使用this.fake.end();

效果展示

点击开始后

 加载完成后

效果为动态加载效果，懒得整动图了

 此效果需要搭配element ui组件来进行实现