创建SVG进度圈

创建SVG进度圈是一种在网页上显示进度的方法，它使用SVG（可缩放矢量图形）来绘制圆形进度条。以下是一个完整的HTML和JavaScript代码示例，用于创建SVG进度圈：

<!DOCTYPE html>
<html>
<head>
 <style>
    .progress-ring {
      display: inline-block;
      position: relative;
      width: 100px;
      height: 100px;
    }

    .progress-ring circle {
      stroke-width: 4;
      fill: none;
      stroke-linecap: round;
      stroke: #007bff;
    }

    .progress-ring circle.progress {
      stroke-dasharray: 0 100;
      transition: stroke-dasharray 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="progress-ring">
    <svg width="100" height="100">
     <circle cx="50" cy="50" r="40"></circle>
     <circle class="progress" cx="50" cy="50" r="40" stroke-dasharray="0 100"></circle>
    </svg>
  </div>

 <script>
    function setProgress(percent) {
      const circle = document.querySelector('.progress');
      const radius = circle.r.baseVal.value;
      const circumference = 2 * Math.PI * radius;
      const offset = circumference - (percent / 100) * circumference;
      circle.style.strokeDasharray = `${circumference * percent / 100} ${circumference}`;
    }

    setProgress(50); // 设置进度为50%
  </script>
</body>
</html>

在这个示例中，我们首先定义了一个SVG进度圈的样式，包括宽度、高度和圆形进度条的样式。然后，我们使用JavaScript函数setProgress来设置进度圈的进度百分比。在这个示例中，我们将进度设置为50%。

您可以根据需要修改这个示例，以适应您的应用程序。