原生svg 绘制进度条

Love The Way You Lie 2022-10-18 14:58 290阅读 0赞

# 效果图 #

![在这里插入图片描述][20210708143840898.gif]

### 本次进度条运用到svg 和 circle标签 对此方面不太熟悉的小伙伴可以收藏记录 防止用的时候找不到 因多为标签运用及css 少量js代码 方便理解每个参数的作用 注释都在代码中 ###

# HTML #

<div>
      <svg width='200' height='200' viewBox="0 0 60 60" style="width:200px;height:200px;">
          <circle cx="30" cy="30" r="27"    fill="transparent" stroke-width="4" stroke="#eee" />
          <circle class="progress"  r="27" cy="30" cx="30" stroke-width="4" stroke="blue" 
          stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  
          stroke-dasharray="169px" />
          /* 第一个circle是一个底色圆环 为了进度条不到100%时显示底色 第二个circle是真正的进度条 r cy这些常见的参数就不说了 stroke-width 圆环宽度 stroke 圆环颜色 stroke-linejoin stroke-linecap 起始点和结束点的过度 目前是圆角过渡 fill 填充色 stroke-dashoffset 起始点 stroke-dasharray 起始点到结束点的圆环周长 目前169px 为整个园 周长=派（3.1415926）*r（半径）的平方 */
      </svg>
    </div>
    
    <style>
       svg { 
           transform: rotate(-90deg);
       }
       .progress { 
           animation: rotate 1s linear both;
           /*infinite ： 循环执行 both：执行一次动画*/
       }
       @keyframes rotate { 
           from { 
               stroke-dashoffset: 169px;
           }
           to { 
               stroke-dashoffset: 0px;
           }
       }
    </style>

# 数据可控圆环进度 #

![在这里插入图片描述][20210708145915261.gif]

# js控制显示进度 #

<div>
        <svg width='200' height='200' viewBox="0 0 60 60" style="width:200px;height:200px;">
            <circle cx="30" cy="30" r="27"    fill="transparent" stroke-width="4" stroke="#eee" />
            <circle class="progress" id="progress-bar" r="27" cy="30" cx="30" stroke-width="4" 					    stroke="blue" stroke-linejoin="round" 
            stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="169px" />
        </svg>
        <span id="progress-detail">20%</span>
        <button onclick="reduce()">减少</button>
        <button onclick="add()">增加</button>
    </div>
    
    
    <script>
    //上面已经知道圆环的控制参数了 我们根据周长计算出没1%的长度改变dom参数即可
        const bar = document.getElementById('progress-bar')
        const detail = document.getElementById('progress-detail')
        const total = 169 // 圆周长
        const per = total / 100 //一个百分比进度代表的周长 
        let progress = 20 // 当前百分比进度
        update(); //初始值渲染
    
        function add() { 
            if (progress >= 100) { 
                return
            }
            progress += 20
            update()
        }
    
        function reduce() { 
            if (progress <= 0) { 
                return
            }
            progress -= 20
            update()
        }
    
        function update() { 
            bar.style.strokeDashoffset = (total - per * progress);//控制圆环周长
            detail.innerHTML = `${ progress}%`
        }
    </script>

[20210708143840898.gif]: /images/20221005/0987fc9f196a401db54056057270047f.png
[20210708145915261.gif]: /images/20221005/cfa1f4fa99ec48e882af0a736b6f6efc.png