css弧形进度条代码

最近在制作网站时，我需要制作一个弧形进度条。在研究了不少资料之后，我终于找到了一种使用 CSS 实现的弧形进度条的方法。以下是我的代码实现：

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

.progress:before,.progress:after { 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.progress:after { 
  z-index: 1; 
  clip: rect(0px,100px,200px,0px); 
  background-color: #52b3d9;
  transform: rotate(135deg);
}

.progress:before {
  z-index: 0; 
  clip: rect(0px,0px);
  background-color: #e2e2e2;
}

.progress[data-progress='0']:before { 
  display:none; 
}

.progress[data-progress='100']:after { 
  display:none; 
}

.progress[data-progress='0']::after {
  background-color: #dcdcdc;
}

.progress[data-progress='100']::after {
  background-color: #52b3d9;
}

.progress[data-progress="0"]::after {
  transform: rotate(135deg);
}

.progress[data-progress="100"]::after { 
  transform: rotate(405deg); 
}

.progress[data-progress]::after {
  transform: rotate(calc(135deg + (225deg * var(--percentage))));
}

首先，我们创建了 .progress 类，设置其为相对定位并设置其宽高为 200px。然后我们使用 border-radius 属性将其变为圆形，并设置其背景色为 #dcdcdc。 其次，我们使用伪类 :before 和 :after 来创建以及初始化进度条的外观。这里，我们的 :after 伪元素表示实际进度；:before 伪元素是用来遮盖，辅助弧形的实现。 接下来，我们需要给 .progress 设置一个 data-progress 属性值。根据当前进度，我们使用 CSS calc 函数来设置实际进度的 transform:rotate 属性，使其在弧形进度条内折线运动。 最后，我们使用属性选择器 [data-progress] 来控制进度条的显示和隐藏效果。这样的弧形进度条代码实现能给网站增色不少，实用美观又简便。