CSS: Circular progress bar adding second color

Question

Here is a jsfiddle: https://jsfiddle.net/pgckezw7/3/

Basically, it works fine with 1 color, but not with 2 colors.

With 2 colors, the problem is if the first perce