SVG Arc Progress bar with constant stroke-dasharray object

Question

Here is my JSfiddle 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.

My Questions and concerns

1) I really like the quality of the SVG object but it is good for cross browser rendering like Canvas? (Canvas vs SVG Performance and Browser support)

2) How to prevent constant object is going to the other side when it reach 100 %?

3) How to make it responsive?

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stop-color="#56c4fb" />
           <stop offset="100%" stop-color="#0baeff" />
         </linearGradient>


        <path class="grey" d="M30,90 A40,40 0 1,1 80,90" style="fill:none;"/>
        <path id="purple" class="purple" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
        <path id="white" class="white" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
 </svg>  

CSS

        svg {
    height: 90vh;
    margin: auto;
    display: block;
    }

    path {
    stroke-linecap: round;
    stroke-width: 6;
    }

    path.grey {
    stroke: #e7e7e8;

    }

    path.purple {
    stroke: url(#gradient);
    stroke-dasharray: 198;
    stroke-dashoffset: 198;
    animation: dash 5s linear forwards;
   }
    path.white {
      stroke: #ffffff;
      stroke-dasharray: 0px, 198px;
      stroke-dashoffset: 198;
      stroke-width: 3.5px;
      animation: dash 5s linear forwards;

    }
    @keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

Changing the keyframes stroke-dashoffset property to 1 instead of 0 seems to solve the issue. I've also cleaned up your SVG syntax of unneeded code and now it's also responsive (meaning it adjusts the height of the SVG according to the parent object.

Regarding your first question, SVG is the way to go, and it is extremely popular for widgets such as this one, much more popular than CANVAS, simply because it is easier to work with. Performance-wise SVG is totally fine.

 svg { height: 90vh; margin: auto; display: block; } path { stroke-linecap: round; stroke-width: 6; } path.grey { stroke: #e7e7e8; } path.purple { stroke: url(#gradient); stroke-dasharray: 198; stroke-dashoffset: 198; animation: dash 3s ease-out forwards; } path.white { stroke: #ffffff; stroke-dasharray: 0px, 198px; stroke-dashoffset: 198; stroke-width: 3.5px; animation: dash 3s ease-out forwards; } @keyframes dash { to { stroke-dashoffset: 1; /* <---- changed to "1" from "0" */ } } 

 <svg viewbox="0 0 100 100"> <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0%" stop-color="#56c4fb" /> <stop offset="100%" stop-color="#0baeff" /> </linearGradient> <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' /> <path id="purple" fill='none' class="purple" d="M30,90 A40,40 0 1,1 80,90" /> <path id="white" fill='none' class="white" d="M30,90 A40,40 0 1,1 80,90" /> </svg> 

Answer 2

1) if a browser is able to do canvas , it is also very likely that it can do svg as well. BUT SVG, specific features need to be checked as well, so its hard to give a general »true|false« here, since some things may work, while others don't.

3) SVG's lives in their own »display scope« , if you do not depend on user input, it behaves pretty much as a simple <img > . Otherwise you will need to transform coordinates.

2) that one might need some js, if you want to display some »real« progress (a XHR for instance), you will need JS anyway… Just make the animation stop|non-repetitive …