jQuery Number Animation – Count Up To A Target Number

This plugin enables you to display exactly what you see in the following image. An easy way to display animated number counters using a shortcode.

It creates a single counter, or in this example, a row of 3 counters.

You set the target number, speed and other options to count to your target number each time the page reloads.

You can change the columns, target number, speed and other settings in the shortcode for each counter.

= Features =

• Animated number counting
• Font Awesome icon support
• Customizable animation duration
• Customizable animation speed
• Responsive design
• Multiple columns support
• Prefix and suffix support
• Title support

= Usage =

Use the shortcode to add counters to your posts or pages:

[counter number="1000" title="Users"]

= Shortcode Parameters =

• number (required): The target number to count to
• icon (optional): Font Awesome icon class (e.g., “fas fa-users”)
• prefix (optional): Text to display before the number
• suffix (optional): Text to display after the number
• duration (optional): Animation duration in milliseconds (default: 2000)
• speed (optional): Animation speed multiplier (default: 1)
• title (optional): Text to display below the number

= Examples =

Basic counter:

[counter number="1000" title="Users"]

With icon:

[counter icon="fas fa-users" number="1000" title="Users"]

With prefix and suffix:

[counter number="1000" prefix="$" suffix="+" title="Revenue"]

Multiple counters in a row:

[counter icon="fas fa-users" number="1000" title="Users"][counter icon="fas fa-download" number="500" title="Downloads"][counter icon="fas fa-star" number="250" title="Reviews"]

== Installation ==

1. Upload the counter folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Add counters to your posts or pages using the shortcode

Frequently Asked Questions

= How do I add icons to my counters? =

Use the icon parameter with Font Awesome classes. For example:

[counter icon="fas fa-users" number="1000" title="Users"]

= How do I change the animation duration? =

Use the duration parameter to set the animation duration in milliseconds:

[counter number="1000" duration="3000" title="Users"]

= How do I change the animation speed? =

Use the speed parameter to adjust the animation speed:

• 1 is normal speed
• 0.5 is half speed
• 2 is double speed

Example:

[counter number="1000" speed="0.5" title="Users"]

= How do I display multiple counters in a row? =

Wrap your shortcodes in a div with the counter-wrapper class and specify the number of columns:

[counter icon="fas fa-users" number="1000" title="Users"][counter icon="fas fa-download" number="500" title="Downloads"][counter icon="fas fa-star" number="250" title="Reviews"]

Demo Code

This is the code used in the demo :

<div class="counter-wrapper columns-3">
    [counter icon="fas fa-users" number="1000" title="Users"]
    [counter icon="fas fa-download" number="500" title="Downloads"]
    [counter icon="fas fa-globe" number="50" title="Countries"]
</div>

And the editor settings with a content width of 1000px :

Works in both the classic editor and block editor.

Click the following button to download the plugin.