A lightweight (1.52KB Minified), multi-purpose and stand-alone plugin for jQuery to animate numbers. The number animation can be trigger with different JavaScript / jQuery events (i.e on click, scroll, load etc). You just need to input the ending value of number in plugin configuration. Then, the plugin count up / increase that value from 0 to end value.
Furthermore, it is also compatible with Bootstrap and other frameworks. You can fully customize it with additional CSS.
Plugin Overview
| Plugin: | Animate Numbers |
| Author: | talmand |
| Licence: | MIT Licence |
| Published: | January 17, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.8.3 or Latest version |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 7.40 KB |
How to Use jQuery Animate Numbers Plugin
1. First of all load jQuery JavaScript library and plugin’s JS file into your HTML page.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Animate Numbers JS --> <script src="js/jquery.animateNumbers.min.js"></script>
2. Now decide, how would you like to trigger counting up number animation? Ok, you can animate values on almost all type of JavaScript events. First you need to create a container (a div or input element) in which your numbers will increase. So, create a div element with a unique id and place your initial value in it.
<div id="myNumber">0</div>
2.1 If you want to increase number in input element, you can define code as below:
<input id="num_input" value="1234" />
3. After that, initialize the plugin in jQuery document ready function to active the numbers animation.
$(document).ready(function(){
$("#myNumber").animateNumbers(52810);
});
Note: The plugin initialization is same for all type of HTML elements (i.e div, input, span etc). Just initialize the plugin with that element id or class.
4. If you want to animate numbers on different events, you can execute the animation using the following syntax.
$(".element").on('event-type', function(){
$("#myNumber").animateNumbers(52810);
});
Tip: Define the event-type (i.e click, load, scroll, submit etc.) in the above mentioned code block to run number animation.
Similar Code Snippets:
- Registration Successful Message Example in HTML
- Live Markdown Editor With Preview Using Codemirror JS
- Search Button Animation in CSS & JS
- Product Order Form HTML Code
- Roman Numeral Converter Using JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.