https://github.com/bendrucker/angular-countdown
Radial countdown timer for Angular
https://github.com/bendrucker/angular-countdown
Last synced: over 1 year ago
JSON representation
Radial countdown timer for Angular
- Host: GitHub
- URL: https://github.com/bendrucker/angular-countdown
- Owner: bendrucker
- License: mit
- Created: 2015-02-20T14:07:36.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T20:22:19.000Z (over 7 years ago)
- Last Synced: 2025-04-15T00:02:40.045Z (over 1 year ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 16
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-countdown [](https://travis-ci.org/bendrucker/angular-countdown)
Radial countdown component for Angular built with SVG.
## Installing
```sh
# npm
npm install angular-countdown
# bower
bower install angular-countdown
```
```js
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:
1. A `CountdownTimer` service which you'll typically inject into your controllers to create new timers
2. A `` 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`](http://nodejs.org/api/events.html).
##### `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.
### ``
```html
```
The `` 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](https://github.com/agrimsrud/svgPieTimer.js)