css实现圆形进度条的方法

CSS实现圆形进度条的基本原理

实现圆形进度条的方法，一般是通过CSS的旋转功能、伪元素等实现。我们可以将进度条看做是一个圆形的背景框，再在框内创建一个可以旋转的留白圆环，最后通过伪元素和定位来实现进度的动态展示

  .progress {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    border-radius: 50%;
  }
  .progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid #fff;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
  }

通过动画实现圆形进度条的效果

为了能够让进度条动态展示，我们需要使用CSS的动画效果。通过将进度条的旋转度数使用动画来控制，可以实现进度条的动态展示效果

  .progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid #f0f0f0;
    border-top-color: #555;
    border-left-color: #555;
    animation: rotate 2s linear infinite;
    box-sizing: border-box;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(-45deg);
    }
    to {
      transform: rotate(315deg);
    }
  }

添加动态进度条效果

让进度条动态展示只是第一步，还需要动态地控制进度条的长度。为了实现这个效果，我们需要在进度条的旋转元素中加入一个遮罩层，并使用clip-path 属性来控制遮罩层的大小，以达到进度条动态变化的效果。

  .progress {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .progress::before {
    // 略
  }
  
  .progress::after {
    // 略
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  
  .progress[data-progress="0"]::after {
    clip-path: polygon(0 0, 0 0, 0 50%, 0 50%);
  }
  
  .progress[data-progress="100"]::after {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 50%);
  }
  
  .progress[data-progress="0"]::after {
    animation: none;
  }
  
  .progress[data-progress="100"]::after {
    animation: none;
  }
  
  .progress[data-progress="25"]::after {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  }
  
  .progress[data-progress="50"]::after {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  
  .progress[data-progress="75"]::after {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  }
  
  @keyframes rotate {
    // 略
  }

完整实现圆形进度条的代码示例

将上述三个代码段合并起来，即可实现完整的圆形进度条，具体样式和代码示例如下