Simple Number Increment Animation with jQuery - countTo

File Size: 11.6 KB
Views Total: 7326
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Number Increment Animation with jQuery - countTo

countTo is a simple jQuery count-up and countdown plugin which animates decimal number increment / decrement at a specified speed and step.

See also:

Basic usage:

1. Include the jQuery countTo plugin after jQuery library as usual.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="build/jquery-countTo.js"></script>

2. Wrap the number you want to count-up or countdown from.

<span class="count-up">0</span>
<span class="count-down">100</span>

3. Call the plugin and specify the target number you want to count up or countdown to.

// count up to 100
$(".count-up").countTo(100);

// count down to 10
$(".count-down").countTo(10);

4. Custom duration. In this case, the plugin will count up to 100 over 5 seconds (default is 1s)

$(".count-up").countTo(100, {"duration": 5});

5. Custom decimals.

// count up to 100.5
$(".count-up").countTo(100.5, {"decimals": 1});

6. Custom maximum steps.

$(".count-up").countTo(100.5, {"max_steps": 10});

7. Custom minimum steps.

$(".count-up").countTo(100.5, {"min_steps": 5});

This awesome jQuery plugin is developed by lessthan3. For more Advanced Usages, please check the demo page or visit the official website.