Tiny Animated Counter Plugin With jQuery - Incremental Number
File Size: | 4.48 KB |
---|---|
Views Total: | 7096 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Incremental Number is a very small jQuery counter plugin which allows counting up to a specified number in an animated way.
How to use it:
1. First you have to add jQuery library and the script incrementalNumber.js
to your html page.
<script src="jquery.min.js"></script> <script src="incrementalNumber.js"></script>
2. Next, simply add the class incrementalNumber
to the tag of the number. This will search for all the tags with this class. And then you have to pass the number as a parameter in data-value
attribute.
<span class="incrementalNumber" data-value="100" ></span>
3. Finally, dont forget to call the function incrementalNumber
when the document is ready!
incrementalNumber();
4. If the number is to big, you can add the parameter big-Number
and de count start 10% less the total.
<span class="incrementalNumber" big-number data-value="2500"></span>
5. If the number is more big, you can especificate the start number like this:
<span class="incrementalNumber" big-number="19800" data-value="20000"></span>
6. You can add text to the end with the parameter set-text
.
<span class="incrementalNumber" set-text="%" data-value="100"></span>
7. The last option can set the total time of the "animate" with set-time
in ms .
<span class="incrementalNumber" set-time="3000" data-value="100"></span>
This awesome jQuery plugin is developed by Joker9090. For more Advanced Usages, please check the demo page or visit the official website.