由於系統UI風格升級，產品童鞋和UI童鞋總是想要搞點兒事情出來，專案頁面上的進度條從直線變成了曲線，哈哈，好吧，那就迎難而上

實現效果：

分析一下實現思路：

• 想要曲線效果，首先就能想到 border-radius 屬性

• 兩個大小寬高一致的div，設定不同的邊款顏色，一個隱藏，一個顯示

• 動態獲取進度條時，隱藏的半圓，通過角度換算，旋轉顯示對應角度的弧長

搞事情，不多說，上程式碼

  <div class="process">
    <div class="ring-def"></div>
    <div class="ring-color" id="ringColor"></div>
  </div>
  <p>
    設定進度條：<input type="number" max="100" min="0" id="procNum"> % <button id="btn" onclick="getProcess()">確定</button>
  </p>
  <script>
    function getProcess() {
      // 此處input使用者輸入 模擬真實請求返回資料
      var val = document.getElementById('procNum').value
      var tmp = val <= 0 ? 0 : val >= 100 ? 100 : val
      document.getElementById('procNum').value = tmp
      var deg = Math.floor(tmp / 100 * 180)
      document.getElementById('ringColor').style.transform = 'rotate(' + deg + 'deg)'
    }
  </script>