I recently attempted to incorporate the following progress bar into my React application:
https://i.sstatic.net/hKpD3.png
Currently, I am using the code snippet below:
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
This code generates two SVG paths within each other, resulting in the structure shown here:
https://i.sstatic.net/Qdkam.png
However, I am facing issues with the corners and need guidance on resolving this problem.
Here is how I am creating the rounded shapes:
<circle
cx={size / 2}
cy={size / 2}
r={
renderDoubleCircleProgress
? size / 2 - 5 - 9
: size / 2 - 5
}
strokeWidth={
thickness
}
fill='none'
className={className}
/>
<circle
cx={size / 2}
cy={size / 2}
r={size / 2 - 5}
strokeWidth={
thickness
}
fill='none'
className={className}
/>