The calculation behind progress circle using dasharray and dashoffset

Question

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

Answer 1

You could have two circles that overlay each other. The first circle being the gray outline and the second circle being the progress overlay. Then change the stroke-dasharray and stroke-dashoffset values of just the second circle and rotate the svg by 90 degrees:

html:

<circle cx="25" cy="25" r="22.5" stroke="rgb(188,188,188)" stroke-width="5" fill="none"></circle>
<circle cx="25" cy="25" r="22.5" stroke="rgb(0,51,117)" stroke-width="5" fill="none" stroke-dasharray="{{circle.circumference}}" stroke-dashoffset="{{circle.circumference * (1 - circle.percentage/100)}}"></circle>

js:

function MyCtrl($scope) {
    var radius = 22.5;
    var circumference = Math.PI*(radius*2);
    $scope.circles = [];
    for(var i=0; i<=10; i++){
        var circle = {
            percentage : i* 10,
            circumference: circumference
      };
      $scope.circles.push(circle);
    }
}

css:

.progress {
    transform: rotate(-90deg);
}

Link to jsfiddle

I found this tutorial helpful.

Answer 2

The radius of your circle is 22.5, so the correct length for your dash array should be

(2 * PI * 22.5) = 141.37

Secondly, you can just use stroke-dasharray by itself. No need to use stroke-dashoffset also.

stroke-dasharray="{{circle.percentage*142/100}} 142"

Updated fiddle

Note: I removed the stroke-linecap="square". You may want to put it back if you added that deliberately.