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.
can it show only seconds ?
ReplyDelete