CSS+JS 实现动态曲线进度条

由于系统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>

CSS+JS 实现动态曲线进度条

原文：https://www.cnblogs.com/echoyya/p/13941223.html