使用css制作一个圆环进度条

好的，以下是一个基本的实现。

首先，我们需要创建一个 `div` 元素作为圆环的容器，并设置其宽度和高度：

<div class="progress-container">
  <!-- 进度条 -->
  <div class="progress"></div>
</div>

然后，我们使用 CSS 设置容器为圆形，并将进度条设置为圆环。我们可以使用 `border-radius` 属性将容器设置为圆形，使用 `border` 属性将进度条设置为圆环，还需要设置进度条的颜色和宽度：

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

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #09f;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

这里我们使用了动画 `spin` 来使进度条旋转。我们还设置了进度条的颜色为蓝色，并将进度条的顶部颜色设置为透明，这样可以创建出圆环的效果。

最后，我们可以使用 JavaScript 来动态设置进度条的进度。这里我们假设进度是一个 0 到 100 的百分比：

const progress = document.querySelector('.progress');
const progressContainer = document.querySelector('.progress-container');

function setProgress(percent) {
  const deg = percent / 100 * 360;
  progress.style.transform = `rotate(${deg}deg)`;
}

setProgress(50); // 设置进度为 50%

这里我们使用了 `transform` 属性来旋转进度条，旋转的角度与进度成正比。通过调用 `setProgress` 函数，我们可以将进度条的进度设置为任意百分比。

完整的代码如下：

<div class="progress-container">
  <!-- 进度条 -->
  <div class="progress"></div>
</div>

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

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #09f;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<script>
const progress = document.querySelector('.progress');
const progressContainer = document.querySelector('.progress-container');

function setProgress(percent) {
  const deg = percent / 100 * 360;
  progress.style.transform = `rotate(${deg}deg)`;
}

setProgress(50); // 设置进度为 50%
</script>