css3实现圆环进度条

可以使用CSS3的transform和transition属性来实现圆环进度条。首先，创建一个div元素作为进度条的容器，设置宽度和高度，并将其设置为圆形。然后，使用伪元素来创建进度条的背景和前景。通过设置transform属性来旋转前景元素，从而实现进度条的动画效果。以下是示例代码：

HTML代码：

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

CSS代码：

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

.progress-bg,
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.progress-bg {
  background-color: #ccc;
}

.progress-bar {
  background-color: #f00;
  transform-origin: center center;
  transform: rotate(-90deg);
  transition: transform 1s linear;
}

.progress-bar[data-progress="25"] {
  transform: rotate(45deg);
}

.progress-bar[data-progress="50"] {
  transform: rotate(90deg);
}

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

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

在进度条的HTML代码中，我们创建了一个div元素作为进度条的容器，并在其中创建了两个div元素，一个用于显示进度条的背景，一个用于显示进度条的前景。

在CSS代码中，我们设置了进度条容器的宽度、高度和圆角半径，并将其设置为相对定位。我们还设置了进度条背景和前景的样式，其中背景使用了灰色的背景色，前景使用了红色的背景色，并将其旋转了-90度，使其位于进度条的左侧。

我们还为前景元素设置了transform-origin属性，将其旋转中心设置为元素的中心点。然后，我们为前景元素设置了一个过渡效果，使其在旋转时产生动画效果。

最后，我们使用data-progress属性来控制进度条的进度，通过设置不同的旋转角度来显示不同的进度。例如，设置data-progress="25"时，前景元素将旋转45度，表示进度条的进度为25%。