---
title: "How to add an Animated Number Counter for Elementor?"
url: https://theplusaddons.com/docs/animated-number-counter-for-elementor/
date: 2024-03-18
modified: 2026-05-29
lang: en
author: "Aditya Sharma"
description: "Want to display animated counting numbers on your Elementor page? An animated number counter adds a dynamic element to your site, drawing attention to statistics, milestones, and metrics as visitors..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-add-an-Animated-Number-Counter-for-Elementor_-1024x536.jpg
word_count: 468
---

# How to add an Animated Number Counter for Elementor?

## 

- Utilizes the Number Counter Widget from The Plus Addons for Elementor to create animated number counters.
- Configures settings such as Number Value, Animation Starting Number Value, and Time delay in Animation Gap for customization.
- Enhances appearance by adding symbols and icons through the Extra Option and Icon tabs.

Want to display animated counting numbers on your Elementor page? An animated number counter adds a dynamic element to your site, drawing attention to statistics, milestones, and metrics as visitors scroll past them.

With the Number Counter widget from The Plus Addons for Elementor, you can add an animated number counter in the Elementor editor, with control over counting speed, starting values, symbol position, and icon display.

*To check the complete feature overview documentation of The Plus Addons for Elementor Number Counter widget, [click here.](https://theplusaddons.com/docs/number-counter-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/number-counter/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

**Best Used For:**

- SaaS and tech websites displaying user counts, uptime stats, or feature adoption numbers

- Agency and portfolio sites showcasing completed projects, team members, or years of experience

- Nonprofit and fundraising pages showing donation totals or campaign milestones

To do this, add the Number Counter widget to the page and follow the steps -

1. From the **Layout** tab, set the **Title** to label what the number represents, such as “Happy Clients” or “Projects Completed”. Use this when displaying multiple counters in a row so visitors immediately understand what each number means.

2. Go to the **Number Counting** tab. In the **Number Value** field, enter the final number the counter should reach, such as 500 or 10,000.

3. In the **Animation Starting Number Value** field, set the number where the count-up animation begins. Setting this to 0 creates a full count-up from zero, which produces the strongest visual impact on first scroll.

4. In the **Number Gap For Animation** field, set the increment between each counting step. Use a smaller gap for smooth, fluid counting and a larger gap when the target number is very high, so the animation completes at a readable pace. To show percentage progress instead of raw totals, the [Circle Progress Bar widget](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/) offers a visual alternative for metrics displays.

5. In the **Time Delay in Animation Gap** field, set the pause in milliseconds between each counting step. A lower value speeds up the animation. Use a higher value when you want a slow, dramatic reveal for a single important statistic.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Number-Counting-9.png)

6. From the **Extra Option** tab, add a prefix or suffix symbol and set its position relative to the number. Use this when displaying currency values such as “$500” (prefix) or percentage totals such as “98%” (suffix).

7. From the **Icon** tab, add an icon to complement the counter. Use a trophy icon for achievement counts, a user icon for client totals, or a check icon for completed projects. The icon reinforces the meaning of each number at a glance. For time-based urgency displays, see [How to Add a Sales Countdown Timer to a WooCommerce Product Page in Elementor](https://theplusaddons.com/docs/sales-countdown-timer-to-a-woocommerce-product-page-in-elementor/).

![Animated Number Counter Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Animated-Number-Counter-Demo.gif)