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组件来进行实现