Animated Number Counter Plugin For jQuery – animationCounter.js

animationCounter.js is a jQuery plugin, animated from one value to another number or infinite value. A very small jQuery plugin allows you to counting or down counting values ​​in an animated manner, and with a step size of delay animation configuration.

How to use it:

Add the jQuery library after JavaScript file animationCounter.js

We added JavaScript files “jquery.mim.js” and “animationCounter.js” into the existing code in the above code.

<script src="jquery.min.js"></script>
<script src="animationCounter.js"></script>

Create an element in which you want to display the animated counter.

We created a class demo within the document using the <span> tag.

<span class="demo"></span>

Call the function animationCounter on the span element with start to end.

In the above code, They called the function of demo class with animationcounter from start to end.
Start: here, it is an integer type value, and the default value of the start is “0”. Here start is nothing but where the starting values will begin counting.
End: here, it also an integer type value, and the default value of the end is “null“. Here end is nothing but the value where the counter gets stopped.

$('.demo').animationCounter({
  start: 0,
  end: 100
});

Customize the step size and animation delay.

In the above code, They called the demo class’s function with the animationcounter step to delay.
Step: It is an integer type value, and the default value will be “1“. Here step is nothing but the interval between the two values.
Delay: It is also an integer type value, and the default value will be 1000. here Delay will be the interval on how often it will be code to be executed.

$('.demo').animationCounter({
  step: 1,
  delay: 1000
});

Customize the suffix text.

In the above code, They called the function of demo class with animation counter txt.
txt: it is a string type, and values in default will be declared within single quotations(‘ ‘)

Uses Of jQuery CounterAnimations: jquery animations mostly used for showing their Instagram post likes, No of clients they gave services, No of products they sold. This counter animation will be handy for the above people.

$('.demo').animationCounter({
  txt: " KB"
});

Done