技術標籤：前端vueCSSjavascriptcssvue.jscss3

vue如何製作動態效果的進度條

先看效果圖

製作這樣動效的進度條其實很簡單，我們只需要將進度條原本的背景通過transparent畫出如下圖片的效果

之後我們通過keyframes設定背景的動畫效果就做成了

下面上程式碼

首先進度條的進度提示這個就比較簡單了，例如我們給一個div中設定了寬高，想要顯示進度為50%的進度條，那麼我們只需讓這個進度條的div寬度等同於父級div寬度的50%就可以了

<div class="progresswrapper">
      <div class
 
="pro"></div>
</div>

.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

這裡我用的是stylus，格式略有不同，正常sass或者基礎的CSS編譯樣式就是加上大括號和每一句末尾加上;就OK了

其中background-image就是用來畫出靜態效果下的進度條樣式，尺寸通用，大家直接複製即可

之後我們開始做動畫效果

@keyframes progressbar{
  0% {
    background-
 
position : 40px 0
  }
  100% {
    background-position : 0 0
  }
}

在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

也就是animation這一屬性

好啦，到這裡整個效果就實現啦，如果想要動態的去改變進度條的值，那麼我們只需要在進度條這個div中，通過

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

來動態改變進度條的寬度即可了

這裡style繫結的width是一個數據，必須提前在data中宣告好
剩下的事就是通過各種事件來動態改變這個width的值就好了，相信小夥伴們都明白，就不多贅述了

如果這篇文章可以幫助到你，就請一鍵三連吧❤