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.

The above is the detailed content of How to Create a Circular Percent Progress Bar with SVG and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!