title: SVG circle animation
body: <p>I am trying to make a circle animation, <br>
  I currently have this: <a href="http://jsfiddle.net/gf327jxu/1/" rel="nofollow">http://jsfiddle.net/gf327jxu/1/</a></p>
  
  <pre><code>&lt;svg width="100" height="100" class="circle"&gt;
     &lt;circle cx="50" cy="50" r="40" /&gt;
  &lt;/svg&gt; 
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.circle{
  stroke:green;
  stroke-width:10;
  fill:none;
  }
  </code></pre>
  
  <p><br>
  I want it animated like a circle progress, something like this: <a href="http://jsfiddle.net/andsens/mLA7X/" rel="nofollow">http://jsfiddle.net/andsens/mLA7X/</a>  but in SVG, <br>And I need it to be clockwise, how can I achieve this, and is this even possible?</p>