原生svg 绘制进度条

效果图

本次进度条运用到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>

数据可控圆环进度

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>