用css3写一个环形进度条

可以使用CSS3的`transform`和`animation`属性来实现环形进度条，以下是一个示例代码：

HTML代码：

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

CSS代码：

.progress-ring {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.progress-bar {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #09c;
  transform-origin: center;
  animation: progress 2s linear infinite;
}

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

解释一下上面的代码：

- `.progress-ring`用于固定进度条的位置和大小。
- `.progress-bar`用于绘制进度条的样式，包括边框、颜色、大小和动画。
- `transform-origin: center;`用于设置进度条旋转的中心点为元素的中心点。
- `animation: progress 2s linear infinite;`用于设置进度条的动画效果，其中`progress`是动画名称，`2s`是动画时长，`linear`是动画速度，`infinite`是动画次数无限循环。
- `@keyframes progress`用于定义动画的关键帧，其中`from`表示起始状态，`to`表示结束状态，`transform: rotate(0deg);`表示开始时进度条的旋转角度为0度，`transform: rotate(360deg);`表示结束时进度条的旋转角度为360度，即一圈。

通过以上代码，我们可以实现一个简单的环形进度条。