css+js实现圆形进度条

首先实现一个静态的圆形进度条
他的实现其实就是两个半圆，然后通过旋转半圆的度数来达到整个圆形的效果
先来看看如何实现一个半圆

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}

image.png

为什么要旋转45°，可以自己去审查元素并且改变度数看看效果。

第一个半圆实现了。接下来实现左边的半圆
代码和右边的相反即可

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

image.png

接下来就要实现动画效果了。
先让右半圆弧旋转180度，再让左半圆弧旋转180度，这样，两个半圆弧由于先后都全部溢出而消失了

        .rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:0;
            -webkit-animation: circleProgressLoad_right 5s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:0;
            -webkit-animation: circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(45deg);
            }
            50%,100%{
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(225deg);
            }
        }

这样就完成了。 要想实现计时的效果只需要修改一下两个半圆的起始度数，和动画里的度数即可。
接下来试着用js来实现动态的计时。

 function action() {
    //先拿到两个半圆
    let left = document.getElementById('left')
    let right = document.getElementById('right')

    let time = 5000   进度条的总时间，可以是一个变量。
    let sj = 20   拟定一个运动间隔时间，就是多久动一次
    let dushu = 360 / (time / sj)  通过总度数除以(总时间除以时间间隔)得到每次运动多少度数
    let rightchushudushu = -135  右半圆的初始度数，这个度数刚好被隐藏掉
    let leftchushidushu = -135  同上
    let cc = setInterval(() => {
      console.log(new Date)
      if (rightchushudushu >= 45) {
        if (leftchushidushu >= 45) {
          clearInterval(cc)
        } else {
          leftchushidushu += dushu
          if (leftchushidushu > 45) {
            leftchushidushu = 45
            right.style.cssText = `-webkit-transform: rotate(${leftchushidushu}deg);`
          }
          right.style.cssText = `-webkit-transform: rotate(${leftchushidushu}deg);`
        }
      } else {
        rightchushudushu += dushu
        if (rightchushudushu > 45) {
          rightchushudushu = 45
        } else {
          left.style.cssText = `-webkit-transform: rotate(${rightchushudushu}deg);`

        }
      }
    }, sj)
  }

总时间需要换算成定时器的时间格式，比如60s 就是60000. 千万不要直接用总度数去除以总时间。这样算出来的距离，这样计算出来的结果。进度条动起来就会一顿一顿，没有那么丝滑了。自己去拟定一个运动间隔时间。然后通过这个时间去计算每次运动的距离。这样实现的效果就会很顺畅，不会一顿一顿。

定时器中的代码有点冗余了，可以自行更改。这里投一下懒，就不改了。说一下里面需要注意的点。
在每次累加度数时，需要去判断一下当前度数是不是大于或等于45度了。如果是，那就直接将度数设置成45度。因为在累加的过程中。计算出来的度数不是整数，有可能会超过45度。这样半圆就会多移动一点距离。整个进度条就会有瑕疵。

贴一个更靠谱的链接https://www.jq22.com/webqd6663