Is there a way to make a circular progress bar like the one in the image in ionic 3?

Question

I am trying to make a circular progress bar like the one in the image attached. I have looked at the following ones:

• https://bootsoon.github.io/ng-circle-progress/
• https://ampersandacademy.com/tutorials/ionic-framework-3/how-to-create-a-working-round-progress-bar-in-ionic3
• http://crisbeto.github.io/angular-svg-round-progressbar/

They are ones that provide a semi-circle but what I am looking at is not a semi-circle but more than that.

I would like to know if there is anything around in the way I need it and if not, how can I modify the current ones available to what I am looking for.

Answer 1

Like this?

Set the dial colours by changing the dialColours array. You can also set the dial size ( dialRadius ) and thickness ( dialThickness ).

Set the progress by passing a percentage to setProgress() .

 const dialColours = [ { colour: 'rebeccapurple', range: 6.5 }, // range is percentage of dial range { colour: 'pink', range: 6 }, // values should add to 100 (%) { colour: 'chocolate', range: 10 }, { colour: 'dodgerblue', range: 15 }, { colour: 'limegreen', range: 18 }, { colour: 'gold', range: 16 }, { colour: 'tomato', range: 28.5 } ]; function initialiseDial() { const dialAngleRange = 270; // deg const dialRadius = 60; const dialThickness = 20; const dial = document.getElementById("dial"); // Add the colour sections to the dial var colourStartAngle = 90 + dialAngleRange / 2; const r = dialRadius + dialThickness; var start = polar2cartesian(colourStartAngle, r); dialColours.forEach(col => { // Find third point point of colour sector triangle let endAngle = colourStartAngle - (col.range * dialAngleRange / 100); let end = polar2cartesian(endAngle, r); // Create the sector using an SVG polygon const path = document.createElementNS(dial.namespaceURI, "path"); path.setAttribute("d", ['M', 0, 0, 'L', start.x, start.y, 'A', r, r, 0, 1, 1, end.x, end.y, 'Z'].join(' ')); path.setAttribute("fill", col.colour); dial.appendChild(path); // Step to next colour angle colourStartAngle = endAngle; start = end; }); // Initialise the progress bar const progressBar = document.getElementById("progress-bar"); start = polar2cartesian(90 + dialAngleRange / 2, dialRadius); const end = polar2cartesian(90 - dialAngleRange / 2, dialRadius); progressBar.setAttribute("d", ['M', start.x, start.y, 'A', dialRadius, dialRadius, 0, 1, 1, end.x, end.y].join(' ')); progressBar.setAttribute("stroke-width", dialThickness); } function deg2rad(deg) { return deg * Math.PI / 180; } function polar2cartesian(angle, radius) { return { x: radius * Math.cos(deg2rad(angle)), y: radius * -Math.sin(deg2rad(angle)) } } // Set the profress about function setProgress(percentage) { const progressBar = document.getElementById("progress-bar"); progressBar.setAttribute("stroke-dasharray", [percentage, 100].join(' ')); } initialiseDial(); setProgress(100);

 svg { width: 200px; }

 <svg viewBox="0 0 160 160"> <defs> <mask id="dial-mask"> <path id="progress-bar" d="" fill="none" stroke="white" pathLength="100"/> </mask> </defs> <!--image href="https://i.stack.imgur.com/9aLrI.png" width="175" height="152"/--> <g id="dial" transform="translate(80, 80)" mask="url(#dial-mask)"> </g> </svg>

Answer 2

You can use this Angular module which uses SVG to create a circular progress bar

http://crisbeto.github.io/angular-svg-round-progressbar/