Minimal Animated Counter For jQuery - Counter.js
File Size: | 3.32 KB |
---|---|
Views Total: | 8325 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Counter.js is a small, cross-browser, animated number counter plugin for jQuery that allows you to counts up to a certain number in an animated way.
How to use it:
1. Load the counter.js
script after jQuery JavaScript library but before you close the body tag.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/counter.js"></script>
2. Add the CSS class count-this
to the target element containing the number you want to animate.
<h4 class="count-this">1200</h4> <h4 class="count-this">800</h4> <h4 class="count-this">900</h4> ...
3. That's it. You can customize the animated counter (e.g. duration, easing function, etc) in the JavaScript.
// Find the 'count this' class on the page and animate it $('.count-this').each(function () { // Start the counting from a specified number - in this case, 0! $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { // Speed of counter in ms, default animation style duration: 2000, // Easing function easing: 'swing', step: function (now) { // Round up the number $(this).text(Math.ceil(now)); } }); });
This awesome jQuery plugin is developed by LadyBiosphere. For more Advanced Usages, please check the demo page or visit the official website.