SVG Arc Progress bar with constant stroke-dasharray object

$10-30 USD

In Progress

Posted

almost 6 years ago

$10-30 USD

Paid on delivery

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.

Project ID: 17091962

About the project

1 proposal

Remote project

Active 6 yrs ago

Looking to make some money?

Email address

Benefits of bidding on Freelancer

Set your budget and timeframe

Get paid for your work

Outline your proposal

It's free to sign up and bid on jobs

1 freelancer is bidding on average $20 USD for this job

@atiqprogramer

I have read your project you should change your code as follows this will stop your constant object on RIGHT side:- @keyframes dash { to { stroke-dashoffset: 0; } } TO THIS @keyframes dash { to { stroke-dashoffset: 1; } }

$20 USD in 1 day