Counter widgets start counting with From-To variables and have different options such duration, delay, prefix, suffix and other things. These counters start only when the element is shown in viewport.

You can count anything and customize the animation, example counters are:

The syntax/markup for counter is:

<span data-count=”this” data-from=”0″ data-to=”99.9″ data-suffix=”%” data-duration=”2″></span>

This will append the counting variable to this SPAN element and will start counting from 0 to 99.9 with % suffix and the counting will be done in 2 seconds.

The full syntax of counter can be like this:

<div data-count=”this|.selector” data-from=”int|float” data-to=”int|float” data-prefix=”string” data-suffix=”string” data-decimal=”.” data-easing=”boolean” data-duration=”int|float” data-delay=”int|float”></div>

Variables can be filled in these ways:

• count (optional, default: this) – if you set “this” value it will count within that tag, if you put jquery selector, then the selected element within that container will be animated
• from (required) – Starting number, can be with floating point
• to (required) – Ending number, can be with floating point
• prefix (optional) – String to prepend before the counting number
• suffix (optional) – String to append after the counting number
• decimal (optional) – Decimal separator character
• easing (optional) – True or false, whether to count with easing algorithm or not
• duration (optional, default: 2.5) – How long will it take to count from–to numbers
• delay (optional, default: 0) – How long should the element wait before starting to count