Flip Clock Countdown & Countup Plugin with jQuery - Counter
File Size: | Unknown |
---|---|
Views Total: | 25039 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Counter is a jQuery counter plugin which allows you to create a countdown & count-up timer with CSS3 powered number flipping effects.
See also:
- jQuery Retro Flip Clock & Countdown Timer Plugin - FlipClock
- Flip Clock-Style jQuery Countdown & Count Up Timer Plugin - flipTimer
- Vintage Flip Clock Style Countdown & Timer Plugin For jQuery - flipcountdown
- Cool Mechanical Scoreboard Style Countdown Plugin For jQuery - Countdown
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.