vue如何制作动态效果的进度条_vue进度条动起来

vue如何制作动态效果的进度条

先看效果图

制作这样动效的进度条其实很简单，我们只需要将进度条原本的背景通过transparent画出如下图片的效果

之后我们通过keyframes设置背景的动画效果就做成了

下面上代码

首先进度条的进度提示这个就比较简单了，例如我们给一个div中设置了宽高，想要显示进度为50%的进度条，那么我们只需让这个进度条的div宽度等同于父级div宽度的50%就可以了

<div class="progresswrapper">
      <div class="pro"></div>
</div>
1
2
3

.progresswrapper
    width : 156px
    height : 7px
    background : #FFFFFF
    position : relative

    .pro
      width : 90%
      height : 100%
      background-image : linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
      background-color #00B83F
      background-size : 40px 40px
1
2
3
4
5
6
7
8
9
10
11
12

这里我用的是stylus，格式略有不同，正常sass或者基础的CSS编译样式就是加上大括号和每一句末尾加上;就OK了

其中background-image就是用来画出静态效果下的进度条样式，尺寸通用，大家直接复制即可

之后我们开始做动画效果

@keyframes progressbar{
  0% {
    background-position : 40px 0
  }
  100% {
    background-position : 0 0
  }
}
1
2
3
4
5
6
7
8

在css样式中使用keyframes写如下代码即可

之后我们在进度条所在的div样式中绑定好这个动画

.pro
      width : 90%
      height : 100%
      background-image : linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
      background-color #00B83F
      background-size : 40px 40px
      animation : progressbar 2s linear infinite
1
2
3
4
5
6
7

也就是animation这一属性

好啦，到这里整个效果就实现啦，如果想要动态的去改变进度条的值，那么我们只需要在进度条这个div中，通过

v-bind:style={ 'width' : width }
1

来动态改变进度条的宽度即可了

这里style绑定的width是一个数据，必须提前在data中声明好
剩下的事就是通过各种事件来动态改变这个width的值就好了，相信小伙伴们都明白，就不多赘述了

如果这篇文章可以帮助到你，就请一键三连吧❤