html5 - Circular Progress bar with SVG

Making Circular Progress bar with html5 svg

Leave a reply

I have made this circular graph with the canvas.  The green progress starts from 120 degrees clockwise and ends at 60 degrees clockwise. In canvas you do this with context.arc(centerx, centery,radius, startangle, endangle, anticlockwise); But I am finding it too dificult from the SVG. Can anyone tell me how to do it from svg. The reason why i like to do it from SVG is that when the progress is animated, the quality of the canvas degrades when the screen is zoomed. And by the way if you need a code for this i can give it to you. It is highly configurable: 1 Solution Solution The arc command of canvas is pretty simple. But in SVG you have to use path to draw circular progress and it is a bit complex. The code for making progress is <path d="M startx starty A radiusx radiusy x-axis-rotation large-arc-flag sweep-flag endx endy " /> The idea behind drawing the progress is that you have to draw a path that passes from the circumference of a circle which starts from specified angle and ends at specified angle. There is a mathematical formula for finding point in the circumference of circle which you can use to create path in svg x = centerx + radius * Math.cos(anglein radians); y = centery + radius * Math.cos(anglein radians); To simplify things, i have found a function that calculates the path. You just have to write this: progress(200, 200, 120, -150, 150); The progress function takes the following parameters: progress(centerx,centery,startangle,endangle); This draws a full progress.If you want to change the progress change the end angle i.e decrease it.This is just the idea behind drawing circular path. Here is the JSFiddle link

This entry was posted in HTML5 on December 15, 2013.

---

JSFiddle code

<svg id="svg" width="1000" height="500">

<circle cx="200" cy="200" r="150" stroke="#ccc" stroke-width="1" fill="none" />

<circle cx="200" cy="200" r="135" stroke="#ccc" stroke-width="1" fill="#777" />

<text x="180" y="200" fill="white">Power</text>

<path id="arc1" fill="none" stroke="#0f0" stroke-width="30" />

</svg>

var svg = document.getElementById("svg");

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

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 arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

var arcSweep = 1;

var d = [

"M", start.x, start.y, 

"A", radius, radius, 0, arcSweep, 0, end.x, end.y

].join(" ");

return d;       

}

document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 120, -150, 150));

출처 - http://www.ggkf.com/html5/making-circular-progress-bar-with-html5-svg