Tiny jQuery-Compatible Countdown JavaScript Library - simplyCountdown.js

File Size: 116 KB
Views Total: 10938
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.