js转圈的进度条效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Progress Bar</title>
<style>
  .progress-container {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#4caf50 25%, #e0e0e0 0);
  }
  .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
</style>
</head>
<body>

<div class="progress-container">
  <div class="progress-circle" id="progressCircle"></div>
  <div class="progress-text" id="progressText">0%</div>
</div>

<script>
  function updateProgress(percentage) {
    const circle = document.getElementById('progressCircle');
    const text = document.getElementById('progressText');
    circle.style.background = `conic-gradient(#4caf50 ${percentage}%, #e0e0e0 0)`;
    text.textContent = `${percentage}%`;
  }

  let progress = 0;
  const interval = setInterval(() => {
    if (progress >= 100) {
      clearInterval(interval);
    } else {
      progress++;
      updateProgress(progress);
    }
  }, 20);
</script>

</body>
</html>