技術標籤：前端開發htmlcss3進度條

一 效果圖

二 上程式碼

<div class="listProgress">
  <div class="currentProgress" :style="{'width': `${(item.value / 1000) * 100}%`}"></div>
</div> 
//${(item.value / 1000) * 100}% 這裡要計算成百分比


.listProgress {
    width: 100%;
    height: 5px;
    background: #F2F2F2;
    border-radius: 2px;
    margin: 8px 0 17px 0;
    position: relative;
    .currentProgress {
      position: absolute;
      width: auto;
      height: 5px;
      background: linear-gradient(90deg, #883156, #DC175E);
      border-radius: 2px;
    }
  }
 

上層有個迴圈 item.value是從上面拿的值 我這裡百分百要自己計算所以除了1000 如果是百分比直接填入值就好了

加油加油