A CodePen by Anders Grimsrud. SVG Pie Timer - As a response to http://css-tricks.com/css-pie-timer/ I wrote this SVG Pie Timer. Credits: Heavily inspired by http://itpastorn.github.com/webbteknik/future-stuff/svg/color-wheel.html.

index.html

<svg width="250" height="250" viewbox="0 0 250 250">
  
  <path id="border" transform="translate(125,125)"/>
  <path id="loader" transform="translate(125,125) scale(.84,.84)"/>
  
</svg>

script.js

var loader = document.getElementById('loader'),
    border = document.getElementById('border'),
    α = 0,
    π = Math.PI,
    t = 30;

(function draw() {
  α += 1;
  α %= 360;
  var r = ( α * π / 180 ),
      x = Math.sin( r ) * 125,
      y = Math.cos( r ) * - 125,
      mid = ( α > 180 ) ? 1 : 0,
      anim = 'M 0 0 v -125 A 125 125 1 ' 
             + mid + ' 1 ' 
             +  x  + ' ' 
             +  y  + ' z';
  x = Math.round( x * 1000 ) / 1000;
  y = Math.round( y * 1000 ) / 1000;
  loader.setAttribute( 'd', anim );
  border.setAttribute( 'd', anim );
  
  setTimeout(draw, t); // Redraw
})();

style.css

svg {
  display: block;
  margin: 50px auto;
  width: 250px;
}

#loader 
{ fill: #0088cc }

#border 
{ fill: #00517a }