Classy Countdown is a jQuery plugin that makes use of Html5 canvas to render a slick, circular, themeable countdown timer on your web page.
- Load jQuery and other dependencies in the web page.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.knob.min.js"></script>
<script src="js/jquery.throttle.js"></script>- Load the jQuery Classy Countdown plugin's files in the web page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/jquery.classycountdown.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.classycountdown.min.js"></script>- Call the plugin to render a circular countdown timer within the target container.
$('#countdown-container').ClassyCountdown({
theme: "white", // theme
end: $.now() + 645600 // end time
});- All the parameters.
$('#countdown-container').ClassyCountdown({
// 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
theme: "white",
// end time
end: $.now() + 645600,
now: $.now(),
// whether to display the days/hours/minutes/seconds labels.
labels: true,
// object that specifies different language phrases for says/hours/minutes/seconds as well as specific CSS styles.
labelsOptions: {
lang: {
days: 'Days',
hours: 'Hours',
minutes: 'Minutes',
seconds: 'Seconds'
},
style: 'font-size: 0.5em;'
},
// custom style for the countdown
style: {
element: '',
labels: false,
textCSS: '',
days: {
gauge: {
thickness: 0.02,
bgColor: 'rgba(0, 0, 0, 0)',
fgColor: 'rgba(0, 0, 0, 1)',
lineCap: 'butt'
},
textCSS: ''
},
hours: {
gauge: {
thickness: 0.02,
bgColor: 'rgba(0, 0, 0, 0)',
fgColor: 'rgba(0, 0, 0, 1)',
lineCap: 'butt'
},
textCSS: ''
},
minutes: {
gauge: {
thickness: 0.02,
bgColor: 'rgba(0, 0, 0, 0)',
fgColor: 'rgba(0, 0, 0, 1)',
lineCap: 'butt'
},
textCSS: ''
},
seconds: {
gauge: {
thickness: 0.02,
bgColor: 'rgba(0, 0, 0, 0)',
fgColor: 'rgba(0, 0, 0, 1)',
lineCap: 'butt'
},
textCSS: ''
}
},
// callback that is fired when the countdown reaches 0.
onEndCallback: function () {
}
});