react-SVGPieTimer

React component for an animated SVG Pie Timer. When you click on the timer, it will show you the remaining time left. Click on it again, to hide the reminaing time.

Recommended use

<SVGPieTimer
    height={250}
    width={250}
    duration={2000}
    loops={2}
    reverse={true}
    inverse={false}
/>

Properties

As seen above, you will need the following properties:

width (mandatory) Set the width of the svg.

height (mandatory) Set the height of the svg.

duration (optional) Set duration in milliseconds. Defaults to 1000.

loops (optional) Set amount of spins. Set to 0 for infinite spins. Defaults to 1.

reverse (optional) Empty the circle from the reverse direction rather than fill it.

inverse (optional) Empty the circle from the same direction rather than fill it.

Pie colors

You can set the color for the inner circle and the outer circle by setting the values in these classes:

.svg-loader {
  fill: #0088cc;
}
 
.svg-border {
  fill: #00517a;
}

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

React component created by Fabian Enos.

Animation code created by Anders Grimsrud.

Inspired by the Color Wheel by Lars Gunther.

History

React version

Refined SVG Pie Timer

Initial SVG Pie Timer experiment.

License

Released under the MIT License.