css实现环形进度条

·  阅读 861

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

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

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

image.png

整体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
复制代码
  • 第四步,整合以上所示,最终效果图,如下所示

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改