Classy Countdown

Download   Demo

ClassyCountdown is a jQuery 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.

1. INCLUDE CSS AND JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <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" />

2. HTML

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

3. JAVASCRIPT

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

4. OPTIONS

• 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.

5. METHODS

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