#circular countdowns

[graphicstip-blog]

VIVID – Responsive Multipurpose Coming Soon Template VIVID - Responsive Multipurpose Coming Soon Template Download Now

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/classy-countdown/

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.