環形進度條是基於svg實現的。

<template>  
  <div class="progress-circle">  
    <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">  
    <!-- width/height表示svg的寬高,viewBox表示根據svg的寬高拉出來的大小 -->  
      <circle class="progress-background" r="50"
 
 cx="50" cy="50" fill="transparent" />  
      <!-- r表示半徑，cx 和 cy 屬性定義圓點的 x 和 y 坐標 fill表示背景色 -->  
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/>  
    </svg>  
    <slot></slot>  
  </
 
div>  
</template>  

<style lang="stylus" scoped>  
  @import ‘~common/stylus/variable‘  
  
  .progress-circle  
    position relative  
    circle  
      stroke-width 8px  
      // stroke-width表示環形的寬度  
      transform-origin center  
      // 中心旋轉  
      &.progress-background  
        transform scale(0.9)  
        stroke $color-theme-d  
      &.progress-bar  
        transform scale(0.9) rotate(-90deg)  
        stroke $color-theme  
</style> 
 

邏輯的實現：

vue慕課網音樂項目手記：30-音樂環形進度條的實現