Add the CSS class ‘purecounter’ to the counter element and specify the start/end points in the data-* attributes.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      class="purecounter">
      0
</span>

Config the duration of the animation. Default: 2.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-duration="3"
      class="purecounter">
      0
</span>

Set the time to wait before the animation. Default: 10.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-delay="5"
      class="purecounter">
      0
</span>

Set whether this animation is only allowed once when you scroll down and up the webpage. Default: true.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-once="false"
      class="purecounter">
      0
</span>

Determine the decimal places to show. Default: 0.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-decimals="3"
      class="purecounter">
      0
</span>

Enable/disable the Legacy mode. Turn on the option to enable the counter on legacy browsers that don’t support the Intersection Observer API. Default: true.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-legacy="false"
      class="purecounter">
      0
</span>

Simply replace the X in "data-purecounter-X" with any of the api methods:

• start - The number to start from (if this is more than the end method it will automatically count down).
• end - The number to end at.
• duration - The time in seconds for the animation to complete, you can use decimals like: 0.5 for half a second.
• delay - The delay between each iteration (the default of 10 will produce 100 fps)
• once - If it should only do the animation once. If this is off the number will do the animation every time the element comes into view, otherwise it will only do it the first time.
• decimals - how many decimal places to show. It will automatically format the number according to the individual users browser standards.
• legacy - Purecounter will use the very leightweight & fast intersectionListener available in most modern browsers. If this is true it will use the scroll event listener on browsers which does not support the intersection listener (RECOMMENDED: true).

Default Values. If you do not override the methods default to these values:

• start: 0 [uint]
• end: 9001 [uint]
• duration: 2 [seconds|uint]
• delay: 10 [miliseconds|uint]
• once: true [boolean]
• decimals: 0 [uint]
• legacy: true [boolean]

GitHub - https://github.com/srexi/purecounterjs