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
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

• .redrawBlock(...args) - re draw digits block (ex. use after resize)

Argument	Type	Status	Description
id	string	required	id of the element

• .redrawAll() - re draw every digits block (ex. use after resize)

• .updateTime(...args) - reset time

Argument	Type	Status	Description
value	string or number	required	number of seconds or date string [YYYY-MM-DD]

Preview