Tiny jQuery-Compatible Countdown JavaScript Library - simplyCountdown.js

simplyCountdown.js is a dead simple JavaScript library used to create a highly configurable and styleable countdown/countup timer for your coming soon / under construction page. Also can be used as a plugin for your jQuery project.

Install & Download:

# Yarn
$ yarn add simplycountdown.js

# NPM
$ npm install simplycountdown.js --save

How to use it:

1. Load the simplyCountdown.js JavaScript library in your html page. If you want to use it as a jQuery plugin, make sure to load the simplyCountdown.js after jQuery library.

<script src="path/to/simplyCountdown.js"></script>

2. Load a theme CSS of your choice in the head section of the html page.

<link href="css/simplyCountdown.theme.default.css" rel="stylesheet">
<!-- Or -->
<link href="css/simplyCountdown.theme.losange.css" rel="stylesheet">

3. Create a simple countdown timer with default theme.

<div class="simply-countdown" id="simply-countdown"></div>

simplyCountdown('simply-countdown', {

  year: 2015, // required
  month: 6, // required
  day: 30, // required
  /* Options here */
  
});

4. Create a simple countdown timer with the 'losange' theme, using jQuery method.

<div class="simply-countdown-losange" id="simply-countdown-losange"></div>

$('#simply-countdown-losange').simplyCountdown({

  year: 2015, // required
  month: 6, // required
  day: 30, // required
  /* Options here */
  
});

5. You can add your own themes in the CSS.

.simply-countdown {
    /* The countdown */
}
.simply-countdown > .simply-section {
    /* coutndown blocks */
}

.simply-countdown > .simply-section > div {
    /* countdown block inner div */
}

.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
    /* amounts and words */
}

.simply-countdown > .simply-section .simply-amount {
    /* amounts */
}

.simply-countdown > .simply-section .simply-word {
    /* words */
}

6. Default options.

// specify the date you want to countdown from
year: 2015,
month: 6,
day: 28,
hours: 0,
minutes: 0,
seconds: 0,

// words displayed into the countdown
words: {
  days: 'day',
  hours: 'hour',
  minutes: 'minute',
  seconds: 'second',
  pluralLetter: 's'
},

// use plurals
plural: true,

// enable inline mode
inline: false,

// enable UTC support
enableUtc: true,

// refresh every 1s
refresh: 1000,

// callback
onEnd: () => {},

// CSS classes
sectionClass: 'simply-section',
amountClass: 'simply-amount',
wordClass: 'simply-word',

// enables zeropad
zeroPad: false,

// uses countup instead
countUp: false

Changelog:

v1.7.0 (2020-12-04)

• Add Javascript HTML elements support

v1.6.1 (2020-11-26)

• Add more languages support for plural words

v1.5.0 (2019-04-24)

• Add countup support

v1.4.0 (2018-11-28)

• Remove bower support
• migrate from LESS to SASS (scss) / for demo and themes
• migrate lib from ES5 to a really basic ES6

2016-06-05

• bugfix

2015-09-06

• code clean

2015-08-29

• Add UTC support

2015-07-05

• Remove ID Only compatibility

2015-07-03

• Add hours, minutes, seconds in available settings to set the target Date

---

This awesome jQuery plugin is developed by VincentLoy. For more Advanced Usages, please check the demo page or visit the official website.