JarCastingangular-countdown 
Radial countdown component for Angular built with SVG.
Installing
# npm
npm install angular-countdown
# bower
bower install angular-countdown
angular.module('myApp', [
require('angular-countdown')
]);
// or with script tags
angular.module('myApp', [
'countdown'
]);
API
angular-countdown provides two interfaces designed to be used together:
- A
CountdownTimerservice which you'll typically inject into your controllers to create new timers - A
<countdown>directive which consumes theCountdownTimerinstances you'll create
CountdownTimer
new CountdownTimer(length [, options])
Creates a new countdown timer with the given length (milliseconds). options may include:
tickInterval: a Number that specifies how often to update the radial countdown in milliseconds. Defaults to 15.
A CountdownTimer is an EventEmitter.
timer.start() -> timer
Starts the timer. At each interval (as defined by options.tickInterval), the timer will emit a 'tick' event with one argument: the proportion of the tick to the length. So if you start a timer for 1.5 seconds, ticking every 15ms, each tick is 15/1500 or 1/100.
When the length has passed, the timer will emit a 'done' event.
timer.cancel() -> timer
Cancels the timer and cleans up the $interval backing it. Emits a 'done' event.
<countdown>
<countdown timer="timer" radius="15" stroke="5"></countdown>
The <countdown> directive accepts three parameters: the timer to bind to, the radius of the timer circle, and the width of the stroke. It builds the SVG needed to create the radial timer effect.
For an example, run npm run example.
Credits
Inspired by svgPieTimer.js