Flip Clock Countdown & Countup Plugin with jQuery - Counter

File Size: Unknown
Views Total: 24972
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Flip Clock Countdown & Countup Plugin with jQuery - Counter

Counter is a jQuery counter plugin which allows you to create a countdown & count-up timer with CSS3 powered number flipping effects.

See also:

How to use it:

1. Load jQuery library, the counter plugin and a counter theme of you choice in the project.

<link href="jquery.counter-analog.css" rel="stylesheet">
<!-- or
<link href="jquery.counter-analog2.css" rel="stylesheet">
<link href="jquery.counter-analog3.css" rel="stylesheet">
-->

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.counter.js"></script>

2. Wrap the number/time you want to countdown from (or count up towards to) into an inline element.

<span class="counter counter-analog" 
      data-direction="down">0:10
</span>

<span class="counter counter-analog" 
      data-direction="up" 
      data-interval="1" 
      data-format="9999" 
      data-stop="2015">0
</span>

3. Initialize the plugin.

 $('.counter').counter({});

4. Options can be passed via JavaScript option object during initialization or data-OPTION attributes in inline elements as shown above.

// initial time
initial: '0:00.0',

// count up or down
direction: 'up',

// the time between each counter increment
interval: '1',

// the format and the limit for each part
format: '9999',

// the counter limit
// eg: 10:00 (ten minutes)
stop: '2015'

This awesome jQuery plugin is developed by sophilabs. For more Advanced Usages, please check the demo page or visit the official website.