結(jié)構(gòu)

 <!-- 進度 -->
   <div class="circle_process">
        <div class="wrapper right">
            <div class="circle rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circle leftcircle"></div>
        </div>
  </div>

樣式

.circle_process {
        position: relative;
        width: 0.9rem;
        height: 0.9rem;
    }

    .circle_process .wrapper {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        overflow: hidden;
    }

    .circle_process .right {
        right: 0;
    }

    .circle_process .left {
        left: 0;
    }

    .circle_process .circle {
        width: 0.9rem;
        height: 0.9rem;
        border: 0.06rem solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(-135deg);
        box-sizing: border-box;
    }

    .circle_process .rightcircle {
        border-top: 0.06rem solid #48b0ef;
        border-right: 0.06rem solid #48b0ef;
        right: 0;
        /*animation: circle_right 5s linear infinite;*/
    }

    .circle_process .leftcircle {
        border-bottom: 0.06rem solid #48b0ef;
        border-left: 0.06rem solid #48b0ef;
        left: 0;
        /*animation: circle_left 5s linear infinite;*/
    }

    @keyframes circle_right {
      0% {
          transform: rotate(-135deg);
      }
  
      50%,
      100% {
          transform: rotate(45deg);
      }
    }

    @keyframes circle_left {
      0%,
      50% {
          transform: rotate(-135deg);
      }
  
      100% {
          transform: rotate(45deg);
      }
    }

js

 function progressFn(perNum) {
      // perNum 為進度值
      var percent = Math.ceil((perNum / 100) * 100);
      var deg1 = ((45 + 135) * percent) / 50 - 135;
      var deg2 = ((45 + 135) * (percent - 50)) / 50 - 135;
      if(percent >= 50) {
        $('.leftcircle').css({
          'transform': 'rotate('+ deg2 + 'deg' +')'
        })
        $('.rightcircle').css({
          'transform': 'rotate('+ 45 + 'deg' +')'
        });
      } else {
        $('.rightcircle').css({
          'transform': 'rotate('+ deg1 + 'deg' +')'
        })
      }
    }
    progressFn(50);

1.png

2.png