SOURCE

const getDegree = (percent) => {
    if(percent > 0.5){
        return {
            left: -45 - ((1-percent) * 360),
            right: -45,
        }
    }

    return {
        right:-225 + (percent * 360),
        left: -225
    }

}

const setPercent = (percent) => {
    const {right, left} = getDegree(percent / 100);
    document.getElementById("r").style = `transform: rotate(${right}deg)`;
    document.getElementById("l").style = `transform: rotate(${left}deg)`;
}

let start = 0;
const arr = [];
let id = null;
// const timer = setInterval(() => {
//     if(start > 100){
//         start = 0;
//     }
//     start++;
//     setPercent(start);
// }, 50)


const run = () => {
    const date = +new Date();
    arr.push(date)
    setPercent(start)
    start++;
    id = requestAnimationFrame(run);
    if(start > 100){
       cancelAnimationFrame(id);
       console.log('时间间隔', arr.at(-1) -  arr[0])
    }
}
run();

<div class="circle_process">
  <div class="wrapper right">
    <div id="r" class="circle rightcircle"></div>
  </div>

  <div class="wrapper left">
    <div id="l" class="circle leftcircle" id="leftcircle"></div>
  </div>
</div>

.circle_process {
    width: 200px;
    height: 200px;
    position: relative;
}
.wrapper{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.left{
    float: left;
}
.right{
    float: right;
}
.circle{
    position: absolute;
    top: 0;
    border: 5px solid rgba(0, 0, 255, 1);
    box-sizing: border-box;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.rightcircle{
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-189deg);
}

.leftcircle{
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(-225deg);
}