Css js实现动态圆环百分比图案

要在CSS和JS中实现动态的圆形进度条（百分比图案），你可以结合HTML、CSS以及一些基本的JavaScript。下面是一个简单的例子：

首先，在HTML中创建一个基础的圆形容器和百分比指示器：

<div id="progress-circle">
  <div class="progress-bar" style="--circle-width: {{ percentage }}%;"></div>
</div>

然后，在CSS中定义圆圈和百分比指示器的基本样式：

#progress-circle {
  position: relative;
  width: 200px; /* 根据需求调整 */
  height: 200px;
  border-radius: 50%;
}

.progress-bar {
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease-in-out;
  will-change: width;
}

接着，使用JavaScript来动态计算和应用百分比宽度：

document.addEventListener("DOMContentLoaded", function() {
  const progressBar = document.querySelector(".progress-bar");
  const circleWidth = document.documentElement.style.getPropertyValue("--circle-width"); // 获取当前百分比

  if (circleWidth) {
    let percentage = parseInt(circleWidth.replace("%", ""));
    progressBar.style.width = `${percentage}%`; // 设置宽度
  }

  // 当需要更新进度时
  function updateProgress(percentage) {
    progressBar.style.setProperty("--circle-width", `${percentage}%`);
    progressBar.style.width = `${percentage}%`;
  }

  // 示例：每秒增加1%的进度
  setInterval(() => {
    if (percentage < 100) {
      updateProgress(percentage + 1);
    }
  }, 1000);
});

在这个示例中，我们监听了DOM加载完成事件，设置了初始的百分比宽度，还提供了一个`updateProgress`函数用于更新进度。你可以根据需要调整百分比变化的速度或者其他细节。