SVG Arc Progress bar with constant stroke-dasharray object

Need solution for this question [login to view URL] Here is my JSfiddle [[login to view URL]] I am trying to make an SVG Arc progress bar with a constant object at the end of the progress bar. When i animate this using JavaScript the constant object is going to the other side when it reach 100%. Otherwise it is working perfectly. Also i found 1 Pixel difference in stroke-dasharray for constant object when using Safari. 1% Progress (Both blue and white object on the left corner) 50% Progress (Both blue and white object on top center) 100% Progress (Both blue and white object on bottom right corner) Challenge for me i am not able to achieve above screenplay to action perfectly & Browser rendering issues may come along with it. FCFS if you can come with working solution first the project will be awarded and give you $30 payment instantly. Also i may need your help with SVG,CSS and JS works.