产品经理找到我说，咱们的这个进度怎么只有百分比，能加个进度条吗，我说可以，随即拿来 element ui el-progress
<el-progress :percentage="showPercent"></el-progress>
产品经理又说，你这个进度条怎么不能动呢，能不能加点动画，我说可以，于是乎写了定时器慢慢加载
<template>
<div class="bar-container">
<el-progress
class="m-progress-bar"
:percentage="showPercent"
></el-progress>
</div>
</template>
<script>
export default {
props:{
percent:{
type:[Number],
default:0
}
},
data(){
return {
showPercent:0
}
},
created(){
this.countPercent()
},
beforeDestroy(){
this.timer=null
this.showPercent =0
},
methods:{
/**
* 开启进度条%比的动画
*/
countPercent(){
let that =this
this.timer=setInterval(function(){
that.increase()
},100)
},
increase(){
this.showPercent+=1
if(this.showPercent<this.percent){
this.showPercent+=1
} else {
this.showPercent= this.percent
clearInterval(this.timer)
}
},
}
}
</script>
结果没一会产品经理又来了，说咱们这个进度是一直进行的，你这个只能动一会，能不能让他看起来像是一直在动的，我…… 最后在我不懈的努力下（百度的）最终满足了产品的需求
父组件
<mProgress :percent="80"/>
m-progress
<template>
<div class="bar-container">
<el-progress
class="m-progress-bar"
:percentage="showPercent"
></el-progress>
</div>
</template>
<script>
export default {
props:{
percent:{
type:[Number],
default:0
}
},
data(){
return {
showPercent:0
}
},
created(){
this.countPercent()
},
beforeDestroy(){
this.timer=null
this.showPercent =0
},
methods:{
/**
* 开启进度条%比的动画
*/
countPercent(){
let that =this
this.timer=setInterval(function(){
that.increase()
},100)
},
increase(){
this.showPercent+=1
if(this.showPercent<this.percent){
this.showPercent+=1
} else {
this.showPercent= this.percent
clearInterval(this.timer)
}
},
}
}
</script>
<style scoped lang="less">
.bar-container{
width:100%;
}
/deep/.m-progress-bar .el-progress-bar__inner:before {
content:"";
width:100%;
height:100%;
display:block;
background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.3) 12.5%,transparent 0,transparent 25%);
background-size:40px 40px;
animation:move 1s linear infinite;
}
@keyframes move {
from {
background-position: 0;
}
to {
background-position: 40px 0;
}
}
</style>
