CSS 实现圆环进度条

圆环进度条是我们工作中经常会碰到的一个需求，首先我们来看看要实现一个圆环我们会怎么做？

<div class="wrapper">
  <div class="circle"></div>
</div>

.circle {
  width: 160px;
  height: 160px;
  border: 20px solid green;
  border-radius: 50%;
}

要实现一个半圆环我们会怎么做？

.wrapper {
  position: absolute;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.circle {
  position: absolute;
  top: 0;
  width: 160px;
  height: 160px;
  border: 20px solid green;
  border-radius: 50%;
}

要实现这个半圆的进度动画，我们可以先把半圆隐藏起来，一点点出现。要把半圆隐藏起来我们可以把它旋转到容器的外面，一点点出现我们可以把该半圆慢慢的旋转回来

.circle {
  position: absolute;
  top: 0;
  width: 160px;
  height: 160px;
  border: 20px solid transparent;
  border-radius: 50%;
  animation: rotate-a 3s linear infinite;
}
.left-circle {
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  left: 0;
}
@keyframes rotate-a {
  0% {
    transform: rotate(-135deg);
  }
  50%,
  100% {
    transform: rotate(45deg);
  }
}

由于我们的容器宽度只有 100，旋转 -135 度之后，这个半圆就看不到了，从动画 50% 开始，我们把半圆过度到旋转 45 度角，也就是回到正立的状态。这是一个半圆进度动画的实现，右半边进度动画也是一样的实现思路，只不过是反过来而已。最终的 demo 如下

<div class="circle-progress">
  <div class="wrapper right">
    <div class="circle right-circle"></div>
  </div>
  <div class="wrapper left">
    <div class="circle left-circle"></div>
  </div>
</div>

.circle-progress {
  position: relative;
  width: 199px;
  height: 200px;
}
.circle-progress .wrapper {
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.circle-progress .right {
  right: 0;
}
.circle-progress .left {
  left: 0;
}
.circle-progress .circle {
  width: 160px;
  height: 160px;
  border: 20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
}
.circle-progress .right-circle {
  border-top: 20px solid green;
  border-right: 20px solid green;
  right: 0;
  animation: circle_right 5s linear infinite;
}
.circle-progress .left-circle {
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  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);
  }
}