Press "Enter" to skip to content

jQuery CountdownGampang inspired and implemented jQuery ClassyCountdown

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

    Leave a Reply

    Your email address will not be published.