css实现环形进度条

项目需求，需要实现环形进度条，整理下相关用到的知识点，以及汇总到自己的动画专栏中。

环形进度条的思路，需要使用两个半圆环+transform+clip 实现环形进度条

• 第一步，先实现两个半圆环。需要实现半圆环，有多种方式，我选择clip进行裁切。clip的值主要为rect(top, right, bottom, left)。其中各个字段的含义为<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起；<left>和<right>指定的偏移量是从元素盒子左边边缘算起。示意图如下所示，中间就是裁切的区域：

整体html结构如下：

    <div class="loadingcirclebox">
        <div class="loadingcircleleft"></div>
        <div class="loadingcircleright"></div>
        <div class="loadingcircle"><img src="https://res0.minigame.vip/gc-assets/new-popstone2/new-popstone2_icon.png" width="120px" height="120px" alt="" class="loadingGameImg" ></div>
        <div class="loadingcircletext">
        </div>
      </div>
复制代码

实现两个圆环样式

.loadingcircleleft {
  border: 12px solid black;
  border-radius: 50%;
  clip: rect(0, 70px, 140px, 0);
}

.loadingcircleright {
  border: 12px solid black;
  border-radius: 50%;
  clip: rect(0, 140px, 140px, 70px);
}
复制代码

• 第二步，两个圆环旋转，会存在层级覆盖的现象，就会出现环形进度条。两个环形的底部是用阴影box-shadow实现底色。一旦两个环形叠在一起的时候，另外一边的半圆显示的就是底色。

.loadingcirclebox {
  position: relative;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  box-shadow: inset 0 0 0 12px rgb(53, 139, 238);
}
.loadingcirclebox * {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loadingGameImg {
  border-radius: 100%;
}
.loadingcircletext{
    top:40%;
    left: 40%;
}
复制代码

• 第三步，因为要实现数字和进度条的显示，那就离不开定时器了，以及最关键的transform

    let percent=0;
    function step() {
      const leftEl = document.querySelector(".loadingcircleleft");
      const rightEl = document.querySelector(".loadingcircleright");
      const testEl = document.querySelector(".loadingcircletext");
      percent++;


      if (percent < 50) {
        rightEl.style.transform = "rotate(" + 3.6 * percent + "deg)";
      } else {
        rightEl.style.transform = "rotate(0)";
        rightEl.style.borderColor = "rgb(53,139,238)";
        leftEl.style.transform = "rotate(" + 3.6 * (percent - 50) + "deg)";
      }
      testEl.innerHTML=`${percent}%`;
      if (percent < 100) {
        setTimeout(step,100);
      }
    }
    window.onload=step
复制代码

• 第四步，整合以上所示，最终效果图，如下所示