el-progress 动画效果进度条（动态进度条）

改elementUI上的进度条为动画效果

最近碰到进度条加载太慢导致以为用户以为页面卡顿的问题，所以给进度条加个动态效果，也就是动画，直接上码

<div v-if="this.uploadVisible == true" class="newpro">
        <el-progress :text-inside="true" :stroke-width="20"  :percentage="progressUp"></el-progress>
</div>

.newpro .el-progress-bar__inner:before{
    content:"";
    width:100%;
    height:100%;
    display:block;
    background-image:repeating-linear-gradient(-45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
    background-size:40px 40px;
    animation:mymove 2s linear infinite;
}

@keyframes mymove{
			0%   {background-position: 0;}
			25%  {background-position: 50px;}
			50%  {background-position: 100px;}
			75%  {background-position: 150px;}
			100% {background-position: 200px;}
		}

1

我一开始动画用的是from跟to，有着很明显的卡顿，然后我把过程拉长了之后呢，目前看起来是不卡顿的。。觉得卡顿可以调试一下background-size属性（个人建议）

因为动画我自己也不常用，比较生涩，，无用勿喷！！