SVG Arc Progress bar with constant stroke-dasharray object
$10-30 USD
W trakcie realizacji
Opublikowano prawie 6 lat temu
$10-30 USD
Płatne przy odbiorze
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.
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;
}
}