A fully customizable countdown javascript for your site.
import Countdown from '@dsabre/countdown';
(function() {
new Countdown();
})();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>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"
<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): "
data-suffix=" to ending!"
data-separator=' | '
></div>https://codepen.io/daniele-sabre/pen/XWaYQew
For contributions, issues and feature requests please check issues page.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent