CircularCountDownJs

A modern, beautiful, and customizable circular jQuery countdown

Demo

A demo is available on JSFiddle here.

Documentation

How to intall CircularCountDownJs ?

Just add this to your html :

<script type="text/javascript" src="https://cdn.rawgit.com/sygmaa/CircularCountDownJs/master/circular-countdown.min.js"></script>

How to use it ?

It's very simple, just create an HTML element like :

<div class="timer"></div>

In Javascript, run the countdown with :

$('.timer').circularCountDown({
  duration: {
      seconds: 10
  }
});

More options

$('.timer').circularCountDown(function (){

    // Size of the circle
    size: 60,

    // Size of the border
    borderSize: 10,

    // Color of the circle border
    colorCircle: 'gray',

    // Background behind the text
    background: 'white',

    // Font of the text
    fontFamily: 'sans-serif',

    // Color of the text
    fontColor: '#333333',

    // Size of the font (px)
    fontSize: 16,

    // Delay to make a jQuery 'fadeIn' animation at the start
    delayToFadeIn: 0,

    // Delay to make a jQuery 'fadeOut' animation at the end
    delayToFadeOut: 0,

    // The loading
    reverseLoading: false,

    // Reverse the direction of the rotation (Not yet available)
    reverseRotation: false,

    // Duration of the countdown
    duration: {
        hours: 0,
        minutes: 0,
        seconds: 10
    },

    // Function call before the countdown
    beforeStart: function(){},

    // Function call after the countdown
    end: function(){}
});

Note : All values for described options are default values.

License

CircularCountDownJs in under a MIT License.

Report a bug

If you discover any bug, please use the issues tracker.

wallaceturner/CircularCountDownJs