css实现圆环进度条

要实现圆环进度条，你可以使用 CSS 的伪元素和 transform 属性来实现。以下是一个简单的示例:

HTML:

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS:

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

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00bcd4;
  transform-origin: center center;
}

.progress::before {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #00bcd4;
}

.progress::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: lightgray;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: lightgray;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: lightgray;
}

在上面的示例中，我们有一个包含两个 div 的容器。`.progress-bar` 是圆环的外部容器，`.progress` 是实际的进度条。我们使用伪元素 `::before` 和 `::after` 来创建圆环的开始和结束点。

通过改变 `.progress` 元素的 `transform` 属性，你可以调整进度条的进度。例如，你可以使用 `transform: rotate(45deg)` 来表示进度条完成了 45%。

你可以根据你的需求修改样式，并使用 JavaScript 来动态更新进度条的进度。