Counter

Counter widget displays numerical data on your site with counting animation applied. The data could showcase statistics, achievements, or important milestones.

View Live Demo

Content Tab

Content

• Item
  • Icon: Choose an icon to represent the counter item.
  • Starting Number: Set the initial number from where the counter starts.
  • Ending Number: Define the final number the counter will count up to.
  • Number Prefix: Add a prefix to the number if needed (e.g., $, #).
  • Number Suffix: Append a suffix to the number if required (e.g., %, +).
  • Title: Name the counter item to indicate what it's counting (e.g., "Cool Number").
• Adding items: Add additional counter items by clicking the “Add Item” button and configuring them similarly to previous item.

Settings

• Columns: Choose the number of columns to display the counter items in.
• Thousand Separator: Toggle to show or hide the thousand separator for better readability of large numbers.
• Animation Duration: Set the time in milliseconds for the counter to reach the ending number from the starting number.

Style Tab

Container

• Space Between: Adjust the space between each counter item.
• Alignment: Align the counter items within the container (left, center, right).

Icon

• Color Type: Select the color of the icon.
• Size: Adjust the size of the icon.
• Padding: Set the padding around the icon to adjust its spacing within the item.

Number

• Color Type: Choose the color of the number text.
• Typography: Configure the typography settings for the number text, including font size, style, weight, and more.
• Padding: Adjust the padding around the number to alter its spacing within the item.

Title

• Color Type: Select the color of the title text.
• Typography: Set the typography options for the title, such as font family, size, weight, transform, style, decoration, line-height, and letter spacing.
• Spacing: Adjust the space between the title and the number.