angular-countdown

Radial countdown component for Angular built with SVG.

Installing

# npm
npm install angular-countdown
# bower
bower install angular-countdown

API

angular-countdown provides two interfaces designed to be used together:

1. A CountdownTimer service which you'll typically inject into your controllers to create new timers
2. A <countdown> directive which consumes the CountdownTimer instances 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