扇形进度条js

<div class="progress-container">
  <div class="progress-circle" id="progressCircle"></div>
</div>

.progress-container {
  width: 100px;
  height: 100px;
  position: relative;
}

.progress-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#4caf50 0% 75%, #ddd 75% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

function setProgress(percent) {
  const progressCircle = document.getElementById('progressCircle');
  progressCircle.style.background = `conic-gradient(#4caf50 ${percent}%, #ddd ${percent}%)`;
}

// 示例：设置进度为75%
setProgress(75);

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" stroke="#ddd" stroke-width="10" fill="none"></circle>
  <circle id="progressCircle" cx="50" cy="50" r="45" stroke="#4caf50" stroke-width="10" fill="none" stroke-dasharray="282.743" stroke-dashoffset="70.686"></circle>
</svg>

function setProgressSVG(percent) {
  const progressCircle = document.getElementById('progressCircle');
  const offset = 282.743 - (percent / 100) * 282.743;
  progressCircle.style.strokeDashoffset = offset;
}

// 示例：设置进度为75%
setProgressSVG(75);