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

由于系统UI风格升级,产品童鞋和UI童鞋总是想要搞点儿事情出来,项目页面上的进度条从直线变成了曲线,哈哈,好吧,那就迎难而上

实现效果:

1.简单搞一搞 CSS , 此处代码有折叠

  .process {
    width: 110px;
    box-sizing: border-box;
    margin: 0 auto;
    height: 55px;
    overflow: hidden;
  } 
  .ring-def {
    width: 110px;
    height: 55px;
    border-radius: 110px 110px 0 0;
    border: 2px solid #E5E5E5;
    border-bottom: none;
    box-sizing: border-box;
  }
  .ring-color {
    width: 110px;
    height: 55px;
    border-radius: 0 0 110px 110px;
    border: 2px solid #ff6200;
    border-top: none;
    box-sizing: border-box;
    transform-origin: top;
    transition: 1s;
  }
  p {
    text-align: center;
    color: #828282;
  }
  input,
  button {
    width: 45px;
    height: 30px;
    line-height: 30px;
    color: #828282;
    font-size: 14px;
    outline: none;
    border: 1px solid #dddddd;
    text-align: center;
  }

分析一下实现思路:

  • 想要曲线效果,首先就能想到 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>
posted @ 2020-11-07 15:47  Echoyya、  阅读(1253)  评论(0编辑  收藏  举报