ClassyCountdown
Countdowns? Can't wait!

Introduction

ClassyCountdown is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to easily create clean circular countdowns. It is fully customizable and includes 12 themes, which can be modified and it uses HTML5 canvas for rendering the circles.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo


Setup

First you need to include the jQuery library, since ClassyPaypal is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassyPaypal javascript, the CSS file and the required dependencies (jQuery knob and jQuery throttle plugins), which you can do it by adding the code below to your page.

<script src="js/jquery.classycountdown.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.throttle.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycountdown.min.css" />

Next, you create the HTML structure on which you want to trigger the plugin.

<div class="countdown"></div>

As the last step, you trigger the plugin on the element you just created. In this case, we trigger it on the element with the class countdown.

$('.countdown').ClassyCountdown({
    theme: "flat-colors",
    end: $.now() + 10000
});

Options

  • Parameters

  • theme - specify the countdown theme you want to load, can be flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide or white-black
  • end -
  • now -
  • labels - whether to display the days/hours/minutes/seconds labels.
  • style - custom style for the countdown, check the actual code for more info.
  • labelsOptions - object that specifies different language phrases for says/hours/minutes/seconds as well as specific CSS styles.

  • Methods

  • onEndCallback() - callback that is fired when the countdown reaches 0.

Example