I'm building a small angularjs directive which will display a progress circle(I don't want animation) and there will be a text in the middle of it indicating the percentage of completion. The html code of the circle is:
<path fill="none" stroke="rgb(0,51,117)" stroke-width="5" stroke-linecap="square" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5" stroke-dasharray="105" stroke-dashoffset="{{circle.percentage*(-140)/100 + 105 }}">
</path>
I don't know the calculation behind the dasharray and dashoffset, I get the calculation {{circle.percentage*(-140)/100 + 105 }} by adjusting the dashoffset and guessing.
I have a fiddle http://jsfiddle.net/ADukg/10992/
As you can see, it only works for the circles from 30% to 70%. Does anyone know the correct calculation of it? I use the CSS tag as one of the tags of my question because the calculation should also work in CSS. Thank you in advance