Number Counter module overview

The Number Counter module displays a number in an animated fashion, with the counter going from zero to the number or percent you specify.

You can configure the Number Counter module in many different ways, as you can see in this screenshot.

  • You can choose a circle, a horizontal bar, or just the number.
  • You can choose the number to be displayed as a percent or standard (an absolute value).
  • If you choose standard numbers, you can add a prefix (such as the dollar sign) or a suffix to the number. 
  • With a standard number in the horizontal bar display, you can choose the maximum number for the total bar length, as well as the counter number. In the turquoise bars in the screenshot, the maximum number was set to 317.
  • You can add text over or under the number, or neither.
  • You can specify colors for the counter and text, and you can change the animation speed for the counter.
Note: You cannot use 0 as a value. It will cause the counter to display 100 or the maximum standard number.

Number counters are most often used to compare two or more numbers. Just add a Number Counter module for each number in the layout you want. Here are the same four Number Counter modules moved into a different layout: