html圆弧形进度条

要创建一个带有圆弧形进度条的HTML元素，可以使用SVG（可缩放矢量图形）和CSS来实现。

以下是一个示例代码：

<div class="progress-circle">
  <svg>
    <circle class="progress" cx="50%" cy="50%" r="70"></circle>
    <circle class="bg" cx="50%" cy="50%" r="70"></circle>
  </svg>
  <div class="progress-text">
    <span class="value">0</span>%
  </div>
</div>

接下来是CSS样式：

.progress-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.progress-circle .bg {
  stroke: #e6e6e6;
}

.progress-circle .progress {
  stroke: #ff8a00;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 1s ease-out;
}

.progress-circle .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #333;
}

.progress-circle .value {
  font-weight: bold;
}

该代码使用SVG元素创建两个圆形元素，一个用于表示进度条的进度，另一个用于表示进度条的背景。CSS样式定义了进度条的样式和动画效果。

要更改进度条的值，可以使用JavaScript或jQuery将`stroke-dashoffset`属性设置为不同的值。例如：

var value = 50; // 进度条的值
var circle = document.querySelector('.progress-circle .progress');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var offset = circumference - value / 100 * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-circle .value').textContent = value;

这将将`stroke-dashoffset`属性设置为相应值，并将进度条文本更新为进度条的新值。