Anim-countdown NPM

Countdown module

features

animated time transition
isolated blocks
supports days,hours,minutes,seconds
inititialize with date string or number of seconds
react/es6 friends

Install

npm install anim-countdown

Usage

import Countdown from 'anim-countdown';

// init 
var countdown = new Countdown({
  seconds: 71,
  callback: callback
});
  
function callback(){
  console.log("done");
};

// element holder
<div id="seconds-holder-id" />

// add seconds handler
countdown.render('seconds-holder-id', 'seconds');

Initialize Options

date - string, YYYY-MM-DD
seconds - integer, number of seconds
callback - callback function to trigger when finished

Methods

.stop() - stop countdown
.start() - resume countdown
.start() - resume countdown
.render(...args) - generate digits block

Argument	Type	Status	Description
id	string	required	id of the element to hold digits block
type	string	required	[days	hours	minutes	seconds]
color	string	optional	css color will apply to inner parts of digits
ratio	number	optional	set auto height based on width of the container
paddingRatioX	number	optional	horizontal padding to digit parts
paddingRatioY	number	optional	vertical padding to digit parts
reduceHeightGap	boolean	optional	balance vertical gab between digit's parts