Classy Countdown is a cutting-edge jQuery plugin that leverages the power of HTML5 canvas to create a stylish, circular, and customizable countdown timer on your website.
Additionally, Classy Countdown jquery plugin offers a wide range of theme options to suit your website’s design and style. Whether you need a simple, minimalist countdown timer or a more elaborate, eye-catching design, Classy Countdown has you covered. This jquery plugin is easy to implement and highly versatile, making it a must-have tool for any website looking to add a sleek and functional countdown timer. Get started with Classy Countdown today and elevate your website’s user experience.
Installation
Load jQuery and other dependencies in the web page.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-knob@1.2.11/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/jquery.classycountdown@1.0.1/css/jquery.classycountdown.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery.classycountdown@1.0.1/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 () {
}
});
