how to create an Angular circular progress bar using SVG-CodePudding

I have created a design for angular circular progress bar. The issue is that i want to give the percentage value dynamic . I have got the dynamic value from API but i have no idea how should i implement it to create a circular progress bar using SVG. I'll share my html skeleton and the css i use.

.track,
    .filled {
      stroke-width: 10;
      fill: none;
    }
    
    .track {
      stroke: rgba(160, 215, 231, 0.85);
    }
    
    .filled {
      stroke: blue;
      stroke-dashoffset: 202;
      stroke-dasharray: 440;
    }

 <div >
            <div >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="-35 0 190 190" >
                <circle  cx="60" cy="60" r="55" />
                <text x="40" y="60" fill="#fff">Patients</text>
                <text x="50" y="75" fill="#fff">{{totalPatient}}</text>
                <circle  cx="60" cy="60" r="55" />
                <circle cx="30" cy="136" r="5" stroke="blue" stroke-width="3" fill="blue" /><text x="40" y="140" fill="#fff">Male {{malePercentage}}%</text>
                <circle cx="30" cy="152" r="5" stroke="rgba(160, 215, 231, 0.85)" stroke-width="3" fill="rgba(160, 215, 231, 0.85)" /><text x="40" y="155" fill="#fff">Female {{femalePercentage}}%</text>
              </svg>
            </div>
           </div>

What i want is that. Lets say i get a male percentage = 70% or any value from an API i want to set the progress bar according to the percentage i get from API. How can i achieve that .i'm not familier with SVG. So any help will be appreciated. Thanks

CodePudding user response：

Hello here is the code pen: https://codepen.io/Echyzen/pen/LYBraGB

var percentage = 75;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage b)
   const concernedCircle = document.getElementsByClassName('filled')[0];
  concernedCircle.style.strokeDashoffset = finalOffset;
}

which extract the a and b of the affine function. You have to click on the button to execute the 75% percentage.

Or using querySelector:

var percentage = 70;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage b)
   const concernedCircle = document.querySelector('.filled');
   concernedCircle.style.strokeDashoffset = finalOffset;
}

CodePudding user response：

Start with the <progress-circle> native Web Component I built : https://pie-meister.github.io/

It is unlicensed Open Source code; do with it whatever your want. Documentation at Dev.to

<progress-circle value="100%">Web Components</progress-circle>
<progress-circle value="71%" stroke="red">React</progress-circle>
<progress-circle value="90%" stroke="orange">Others</progress-circle>

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<style>
  progress-circle {
    font-family: Arial;
    width: 180px; /* StackOverflow viewport */
  }
  progress-circle::part(label) {
    font-size:70px;
  }
</style>