countdowngampang.js is a rewritten version of arsensokolov’s Classy Countdown plugin that helps you create countdown timers with the jQuery knob plugin.
Features:
- Countdown time from the preset time.
- The timing is determined using the date category
- Custom theme from original jQuery ClassyCountdown 🙂
- The custom style is also built-in jQuery ClassyCountdown 🙂
JQuery Countdown Gampang is a jQuery plugin that uses Html5 canvas to display a customizable circular countdown counter on your webpage. As arsensokolov writes in ClassyCountdown README.
How to make use of it:
1. Load the required JavaScript and CSS files within the doc.
<!-- jQuery Classy Countdown CSS --> <link rel="stylesheet" href="/path/to/cdn/jquery.classycountdown.min.css" /> <!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery knob --> <script src="/path/to/cdn/jquery.knob.min.js"></script> <!-- jQuery throttle --> <script src="/path/to/cdn/jquery.ba-throttle-debounce.min.js"></script>
2. Load the jQuery countdowngampang.js plugin.
<script src="/path/to/dist/jquery-countdowngampang.min.js"></script>
3. Create a container to hold the countdown timer.
<div id="countdown-gampang"></div>
4. Create a default countdown timer that counts down to a given date.
var finish_d = new Date(); finish_d.setDate(finish_d.getDate() + 50); $('#countdown-gampang');.CountdownGampang({ rampung: finish_d }
5. Trigger a function after the countdown has completed.
$('#countdown-gampang');.CountdownGampang({ rampung: finish_d }, function(){ // do something });
6. Set the theme of the countdown timer:
$('#countdown-gampang').CountdownGampang({ rampung: finish_d, theme: "flat-colors-very-wide", })
7. More configuration options with default values.
$('#countdown-gampang');.CountdownGampang({ // 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, text: 0.5, 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 onEndCallback: function () { if (window.console && window.console.log) { window.console.log("[CountdownGampang::isRampung] Wayae, wayae ......"); } }, });
Countdown Circle With jQuery, Countdown Gampang Plugin/Github
See Demo And Download
Official Website(fadhilah1992): Click Here
This superior jQuery/javascript plugin is developed by fadhilah1992. For extra Advanced Usages, please go to the official website.
Be First to Comment