css+js+h5 实现环形进度条的完整代码

HTML部分：

<div class="progress-ring">
  <div class="progress-bar"></div>
  <div class="progress-value">0%</div>
</div>

CSS部分：

.progress-ring {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.progress-bar:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #1abc9c;
  transform: rotate(-90deg);
  transform-origin: center;
}

.progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
  color: #1abc9c;
}

JavaScript部分：

const progressBar = document.querySelector(".progress-bar");
const progressValue = document.querySelector(".progress-value");

let progress = 0;
const interval = setInterval(() => {
  progress += 1;
  progressBar.style.backgroundImage =
    "linear-gradient(" +
    (90 + (progress / 100) * 360) +
    "deg, transparent 50%, #1abc9c 50%), linear-gradient(90deg, #1abc9c 50%, transparent 50%)";
  progressValue.textContent = progress + "%";
  if (progress >= 100) {
    clearInterval(interval);
  }
}, 50);

这段 JavaScript 代码会使进度条的进度从 0% 逐渐增加到 100%。具体实现方式是通过设置 `progressBar` 元素的背景图片，利用 `linear-gradient` 渐变来实现环形进度条的效果。同时，也会动态更新进度值，将其显示在 `progressValue` 元素中。