The Number Counter component is a versatile tool designed to dynamically animate numbers on your website. This component can be used to display statistics, countdowns, financial figures, percentages, and more. It provides a visually engaging way to showcase key data points and draw attention to important metrics.

Key Features

• Dynamic Animation: The numbers increment or decrement from a starting value to a target value.
• Customisable Prefix and Suffix: Add symbols or text before or after the numbers, such as currency signs or percentages.
• Adjustable Duration and Increment: Control the speed and steps of the animation for smooth transitions.

Usage Instructions

The only component that matters is the div with a class of “number-counter-wrapper” along with the basic text within it.

The div with a class of “number-counter-wrapper” has several attributes that can or should be applied. those marked with an * are optional.

• data-target-number: Set this attribute to the final number the counter should display.
• data-target-number-duration: (Optional) Specify the duration (in milliseconds) over which the animation should run, the default is 3000 (3 seconds).
• data-target-number-increment: (Optional) Define the increment size for the animation steps. The default value for the increment is 1 but you can change this by adding this attribute and a value.
• data-target-number-prefix: (Optional) Add a prefix, such as a currency symbol.
• data-target-number-suffix: (Optional) Add a suffix, like a percentage sign.
• data-target-number-max: (Optional) Set a maximum value to format the number display with leading zeros if necessary. If the max number and the target number have the same number of digits this is not required as by default leading zero are added that are equal to the number of digits in the target number. If you do not want leading zeros you can use this to remove them by setting this to 0.