[分享]css3扇形进度条

CSS3扇形进度条是一种炫酷的进度条效果，可以使网页更加生动、有趣。下面来介绍如何实现。

/* 定义一个大圆 */
#circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 圆形 */
  background-color: #eee;
}

/* 定义扇形初始状态 */
#sector {
  position: absolute;
  width: 100px;
  height: 200px;
  border-radius: 0 100px 100px 0; /* 与圆形重叠，只保留右半边 */
  background-color: red;
  transform-origin: 0 50%; /* 以左侧边缘为基准进行旋转 */
  transform: rotate(-90deg); /* 默认初始状态为0% */
}

/* 定义扇形动画 */
@keyframes progress {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(calc((100% * 3.6deg) - 90deg)); /* 最大旋转角度为360° */
  }
}

/* 应用动画 */
#sector.progress {
  animation: progress 2s ease-in-out forwards;
} 

首先通过CSS设置一个大的圆形框，再通过一个弧形的div与其重叠，只保留右侧的一半，形成扇形。通过设置transform-origin和transform属性控制旋转，以及通过关键帧动画实现从0%到100%的进度变化。需要注意的是，进度的变化与旋转角度的对应关系为1%:3.6°，因此最大旋转角度为360°。最后将动画应用到扇形的class中即可。