Skip to content

Latest commit

 

History

History
56 lines (36 loc) · 1.62 KB

README.md

File metadata and controls

56 lines (36 loc) · 1.62 KB
Raw

svgPieTimer.js

Animating an SVG Pie Timer in javascript

Current version: 0.9.1 released 28.08.2014

Recommended use

<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>

Demo

For a demonstration see this CodePen.

Properties

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.

requestAnimationFrame

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.

Authors and credits

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.

License

Released under the MIT License.