[分享]css3控制圆形进度条

CSS3控制圆形进度条

 .progress {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ddd;
  }

  .progress:before {
    content: ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f7b731;
    clip: rect(0, 50px, 100px, 0);
    transform-origin: center left;
    animation: progress 2s linear forwards;
  }

  @keyframes progress {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  } 

使用CSS3可以轻松控制圆形进度条的样式，我们可以使用border-radius属性来设置圆形，通过:before伪元素来实现进度条效果。具体实现时，设置一个宽高相同的正方形，再把它的border-radius设置成50%，就可得到一个圆形。接着，通过:before伪元素来添加进度条。设置clip属性把正方形裁剪成一个扇形，然后设置transform-origin属性为中心左边，就可让进度条从左侧开始绘制了。最后，通过animation属性来设置进度条的动画，通过@keyframes来控制动画的细节，从而实现圆形进度条的效果。