Turn Static Numbers Into Something More Lively – Number-Animate

A small animated number library that makes it possible to smoothly count up or down to a specified number.

Great for displaying statistics, results, or real-time data in an eye-catching manner on your webpage.

How to use it:

1. Import the main script ‘number_animate.js’ into your document.

<script src="./number_animate.js"></script>

2. Create a ‘number-animate’ container and specify the start/end values.

<div 
  class="number-animate">
  number-animate-start="0"
  number-animate-end="100"
 </div>

3. customize the increment amount and delay between counts.

<div 
  class="number-animate">
  number-animate-start="0"
  number-animate-end= "100"
  number-animate-increment="1"
  number-animate-delay="20"
</div>