js实现圆形渐变进度条

<div class="progress-ring">
  <svg>
    <circle stroke-width="10" r="50" cx="50" cy="50"></circle>
  </svg>
  <span class="progress-text">0%</span>
</div>

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

.progress-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring circle {
  fill: none;
  stroke: url(#gradient);
  stroke-linecap: round;
}

#gradient {
  stop-color: #ff6f61;
  stop-color: #ffd1dc;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

<svg style="display: none;">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ff6f61;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ffd1dc;stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

const circle = document.querySelector('.progress-ring circle');
const radius = circle.r.baseVal.value;
const circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
  document.querySelector('.progress-text').textContent = `${percent}%`;
}

// 模拟进度更新
let progress = 0;
const interval = setInterval(() => {
  if (progress > 100) clearInterval(interval);
  setProgress(progress++);
}, 50);