Create SVG progress circle

Question

Anyone know how to create a circle \"progressbar\" in svg? I need to specify the percentage of the circle, så that a color grows in the shape of a cake.

The growing

Answer 1

Use this self implemented method in JavaScript for example here percentage=85

HTML Code:

0 %
  

jQuery Code:

    percentage=85
    if(percentage>=50)
    {
        flag=1;
    }
    var per=0;
    $(svg).animate({ 'to': 1 }, {
    duration: 2000,
    step: function(pos, fx) {

        //var offset = (pos);
        if(pos<0.5)
        {
            if(percentage>=50)
            {
                per=180;
                $('#percentage').html(Math.round(pos*100)+" %");
            }
            else
            {
                per=(percentage*180/50);
                $('#percentage').html(Math.round(percentage*pos*2)+" %");
            }

            endx=110-50*Math.cos(0+(Math.PI/180)*per*(pos*2));
            endy=60-50*Math.sin(0+(Math.PI/180)*per*(pos*2));
            svg.setAttribute('d',current_dx+endx+","+endy);
        }   
        else if(pos>=0.5 && pos!=1 && flag==1)
        {
            per=((percentage-50)*180/50);
            $('#percentage').html(Math.round(50+(percentage-50)*(pos-0.5)*2)+" %");
            endx=110+50*Math.cos(0+(Math.PI/180)*per*(pos-0.5)*2);
            endy=60+50*Math.sin(0+(Math.PI/180)*per*(pos-0.5)*2);
            svg.setAttribute('d',current_d+endx+","+endy);

        }


    }
});

Demo : Click Here