如何使用 SVG 和 JavaScript 建立圓形百分比進度條？-css教學-PHP中文網

如何使用 SVG 和 JavaScript 建立圓形百分比進度條？

Linda Hamilton

發布： 2024-11-15 13:11:02

原創

686 人瀏覽過

How to Create a Circular Percent Progress Bar with SVG and JavaScript?

Creating a Circular Percent Progress Bar

To create a circular percent progress bar like the one seen in the mockup, consider using SVG due to its flexibility in creating rounded shapes.

SVG Code:

<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 (Optional):

To animate the progress and increment the percentage, use the following jQuery code:

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

登入後複製

Result:

The SVG code will create a circular progress bar with a yellow background and white progress indicator. The JavaScript animation will increment the percentage displayed in the center of the progress bar from 0 to 100% over 5 seconds.

以上是如何使用 SVG 和 JavaScript 建立圓形百分比進度條？的詳細內容。更多資訊請關注PHP中文網其他相關文章！