jQuery Number Animation – Counter To Count Up To A Target Number

This code enables you to display exactly what you see in the following image:

It creates a fun counter or in this example, a row of 4 counters.

You simply set the target number, speed and other options to count to your target number each time the page reloads. Here’s the video demo:

You can change the target number and speed in the HTML for each counter.

HTML

data-to="300" 
data-speed="1500"

data-to= In the above example, “300” is the target number.

data-speed= “1500” is the speed at which it counts. Reduce this number to count faster and increase it to count slowly.

The numbers are set and the target number and speed do not change dynamically.

The code includes jQuery, CSS, HTML and PHP.

Also includes CSS for custom column classes and additional HTML if you want to use Bootstrap column classes for Genesis users.

Code Installation

jQuery – Paste the jQuery into a new file named counter.js in your child themes js folder.
CSS – Paste in your child themes style.css file.
HTML – Paste into a text widget in the Counter widget.
PHP – Paste at the end of your child themes functions file.

Here’s all the code: