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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
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 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.
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.
