-1

I am trying to implement this SVG circular progress bar using this code.

But it is not working in browsers other than Chrome. Can anyone tell me the what's the problem?

The code as below:

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="200px" height="200px" viewBox="-5 0 210 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle base"></path>
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle progress" style="-webkit-animation-duration: 5s;"></path>
</svg>

CSS

 body {
   margin: 0;
   height: 100%;
   }

 svg {
    display: table;
    height: 100%;
    width: 50%;
    margin-left: 25%;
     }

 path.circle {
   display: table-cell;
   fill: none;
   stroke: #DEDEDE;
   stroke-width: 10;
   stroke-dasharray: 629;
   vertical-align: middle;
   -webkit-transform-origin: center center;
   }

  path.progress {
    stroke: #0094CC;
   -webkit-animation: progress 20s linear;
   -webkit-transform: rotate(-90deg) scale(1, -1);
   }

  path.base {
   /* -webkit-animation: base 20s linear; */
    -webkit-transform: rotate(-90deg);
   }

   @-webkit-keyframes progress {
     from { stroke-dashoffset: 629; }
     to { stroke-dashoffset: 0; }
    }

   @-webkit-keyframes base {
         from { stroke-dashoffset: 0; }
         to { stroke-dashoffset: 629; }
     }

My question is if I add the properties for -moz-, -o- still it does not work in Firefox or opera. What might be the problem. While the same code works in Chrome .any extra thing I may be missing out for Firefox or opera.I replaced the values -webkit- with -moz-,-o- still it does not work.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
user3428616
  • 65
  • 4
  • 14

1 Answers1

2

i think when animating with css , try to adapt it to all browser : 

-webkit-animation: progress 20s linear;
-moz-animation:    progress 20s linear;
 -o-animation:     progress 20s linear;
 animation:        progress 20s linear;

do the same thing for all css animation who have -webkit- suffix , and for transforms too , hope this help

Zakaria Wahabi
  • 213
  • 2
  • 12
  • I have tried adding but the animation does not work properly in other browsers – user3428616 May 20 '15 at 16:57
  • i have already worked on a project and have the saame effect , but i didn't do the animations with css but with jquery and it worker for me in all browser i suggest you to annimate with jquery , use tween max library or the default jquery animation and animate the stroke-dashoffset proprety – Zakaria Wahabi May 20 '15 at 17:01
  • thanks for the workaround solution but i want to know if any property is missing or what needs to be done for this to work in other browsers..It is supposed to work if i give -moz- or -o- .. but still this does'nt seem to work.. – user3428616 May 20 '15 at 17:08
  • and whats the probleme in the other browsers ? the animation don't work or what? – Zakaria Wahabi May 20 '15 at 17:15
  • in other browser no animation is coming..I tried modifying in the codepen link as well separately tried putting the code in html file..in firefox it seems to show the animation is running but no outcome in browser display.. – user3428616 May 20 '15 at 17:18
  • this is the css3 browser support issue i think , i test you code in jsfiddle and it work in safari & opera the animation run perfectly , my suggestion is to animate the stroke-dashoffset with jquery it pretty simple and it work in all browser – Zakaria Wahabi May 20 '15 at 17:31