Animating an SVG Pie Timer in javascript
Current version: 0.9.1 released 28.08.2014
<script src="http://cdn.rawgit.com/darius/requestAnimationFrame/master/requestAnimationFrame.min.js"></script>
<script src="svgPieTimer.min.js"></script>
<script>
svgPieTimer({
element: SVGPathElement,
duration: 1000,
loops: 2
});
</script>For a demonstration see this CodePen.
As seen above, you can call svgPieTimer() with the following properties:
element (required) SVG Path element to animate. Will accept array.
duration (optional) Set duration in milliseconds.
loops (optional) Set amount of spins. Leave blank for 1 spin. Set to 0 for infinite spins.
To optimize for performance, I've decided to use requestAnimationFrame. Browser support is good, but could have been better. I recommend using a polyfill for older browsers like IE9. Personally I prefer this one by Darius Bacon, based on the polyfill by Erik Möller.
Created by Anders Grimsrud. This release is a refined version of the initial SVG Pie Timer experiment.
Inspired by the Color Wheel by Lars Gunther.
Released under the MIT License.