如何使用 SVG 和 JavaScript 创建圆形百分比进度条？

创建圆形百分比进度条

要创建像样机中所示的圆形百分比进度条，请考虑使用 SVG，因为它可以灵活地创建圆形形状。

SVG 代码：

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text>

CSS：

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 25%;
}

JavaScript（可选）：

要动画显示进度并增加百分比，请使用以下 jQuery 代码：

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

结果：

SVG 代码将创建一个带有黄色背景和白色进度指示器的圆形进度条。 JavaScript 动画将在 5 秒内将进度条中心显示的百分比从 0 增加到 100%。

以上是如何使用 SVG 和 JavaScript 创建圆形百分比进度条？的详细内容。更多信息请关注PHP中文网其他相关文章！