Animated Counter

  1. Home
  2. Knowledge Base
  3. Animated Counter

 

The Count Up widget is an animated counter that progresses between any two pre-defined numbers. An extensive suite of styling controls are available, providing font options, animation control and several pre-styled graphical themes. Perfect for donation counters, data or product information.

Demo: https://demo.wocode.com/count-up

Tutorial Video

Setup

PLACEMENT

  • Place the widget where you would like the counter to appear.
  • The counter may be aligned left or right. See the Counter Alignment section in the Design tab.

WIDGET OPTIONS

  • Unique ID: Use a Unique ID if you would like to use multiple instances of the widget.
  • Start Number: This is the number that the counter begins from.
  • End Number: This is the number that the counter ends with.

    In most cases, this widget is used to count up. However, since you can enter any number for the start and end, you may count up or down.

    Please note that if the number counts down, each digit will count down to zero (if using multiple digits), rather than multiple digits counting down to a single zero. it will end in all zeros instead of a single zero. This is due to the fact that the widget does not look at the number as one number, but individual numbers between 0-9. For example, 25,000 would count down to 00,000 because each individual number counts to zero instead of the a countdown to 0.

  • Counter Format: This selector allows use of commas and periods (decimals) in various locations; to better account for international numbering.
  • Counter Prefix: This can be used to enter any symbol or text you like, such as $.
  • Counter Suffix: This can be used to enter any symbol or text you like, such as ¢.
  • Animation: This section contains the following setting:
  • Animation Delay: This allows for a delay before the animation begins.

Widget Options (Design):

  • Counter Layout: You may use a horizontal or vertical layout. Most cases will use the horizontal layout. The vertical layout places the prefix or suffix symbol/text above or below the number.
  • Counter Alignment: This allows you to align the counter left, center or right. Use this feature to align the counter with text within a headline for example.
  • Theme: This option allows you to choose from several themes for the counter, such as slot machine, digital, and more.

    Note: Some elements such as the prefix, suffix, commas or periods may not appear styled the same as the rest of the numbers in certain themes.
  • Theme Options: This section currently contains one option:
  • Counter Font Size: This sets the size of the counter number font.
  • Prefix Style / Suffix Style: These sections allow you to style the text used for the prefix or suffix.
Join Now