Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 8, 2012 19:56
Show Gist options
  • Save anonymous/4041130 to your computer and use it in GitHub Desktop.
Save anonymous/4041130 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
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>
Raw
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
})();
Raw
style.css
svg {
display: block;
margin: 50px auto;
width: 250px;
}
#loader
{ fill: #0088cc }
#border
{ fill: #00517a }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment