Countdown

A fully customizable countdown javascript for your site.

Usage/Examples

Initialization

import Countdown from '@dsabre/countdown';

(function() {
    new Countdown();
})();

Usage

Declare an html element with data-dscountdown attribute, the value must be in the format: m/d/Y H:i:s

<div data-dscountdown="12/31/2050 23:59:59"></div>

Other attributes

Labels

data-labels='{"days":"days","hours":"hours","minutes":"minutes","seconds":"seconds"}'

Prefix

data-prefix="Timer! "

Suffix

data-suffix=" to ending!"

Change separator (default ":")

data-separator="."

Custom container classes

data-countdownclasses="exampleClass1 exampleClass2 ... exampleClassN"

Custom values classes

data-valuesclasses="exampleClass1 exampleClass2 ... exampleClassN"

Custom labels classes

data-labelclasses="exampleClass1 exampleClass2 ... exampleClassN"

Custom separator classes

data-separatorclasses="exampleClass1 exampleClass2 ... exampleClassN"

Full example

<div
    data-dscountdown="12/31/2050 23:59:59"
    data-countdownclasses="bg-green"
    data-valuesclasses="bg-blue"
    data-labelclasses="bg-light"
    data-separatorclasses="bg-red"
    data-labels='{"days":"days","hours":"hours","minutes":"minutes","seconds":"seconds"}'
    data-prefix="Countdown to <b>12/31/2050 23:59:59</b> (full config):&nbsp;"
    data-suffix="&nbsp;to ending!"
    data-separator=' | '
></div>

Demo

https://codepen.io/daniele-sabre/pen/XWaYQew

Contributing

For contributions, issues and feature requests please check issues page.

Authors

• Daniele Sabre

Support me

License

MIT