Skip to main content
Version: Beaver Builder 2.11

Number Counter

Use Number Counter to display an animated number, percentage, circle, or bar that counts up when it scrolls into view.

Usage​

Use Number Counter to render an animated number that counts from a start value to an end value when the module scrolls into view. The module supports three layouts: a plain number, a circular progress indicator, and a horizontal bar. Numbers can display as a percentage or as a standard number with optional prefix and suffix text, and the animation speed and delay are configurable.

Use Number Counter on landing pages, About pages, statistics sections, and pricing or service pages where animated metrics reinforce a key figure. It fits any layout that needs a single, focused stat such as customer counts, completion rates, satisfaction scores, or fundraising progress.

Module Settings​

The Number Counter module settings control the layout, the counter values, the surrounding text, and the appearance of the number, circle, and bar styles.

General Tab​

The General tab sets the layout, counter values, surrounding text, and animation timing.

Layout Default: Only Numbers

Selects the visual style used for the counter.

  • Only Numbers: Renders the animated number on its own with no progress indicator.
  • Circle Counter: Renders a circular SVG progress ring around the number.
  • Bars Counter: Renders a horizontal progress bar with the number positioned relative to it.
Number Position Default: Inside Bar

Controls where the number appears relative to the bar. This field is available when Layout is set to Bars Counter.

  • Inside Bar: Places the number inside the progress bar.
  • Above Bar: Places the number above the bar.
  • Below Bar: Places the number below the bar.
  • Hidden: Hides the number and shows only the bar.
Number Type Default: Percent

Selects how the counter value is interpreted and displayed.

  • Percent: Treats the value as a percentage and appends a % sign automatically.
  • Standard: Displays the value as a plain number and reveals the Number Prefix and Number Suffix fields.
Start Counter Default: 0; Supports: Field Connections

The starting value the counter animates from.

End Counter Default: 100; Supports: Field Connections

The final value the counter animates to.

Total Units Default: 100; Supports: Field Connections

The total number of units used to calculate progress for the Circle Counter and Bars Counter layouts. For example, if End Counter is set to 250 and Total Units is set to 500, the counter animates to 50 percent. Total Units should not be less than Start Counter or End Counter.

Text Before Number Supports: Field Connections

Optional text displayed above the number. Leave it empty for none.

Text After Number Supports: Field Connections

Optional text displayed after the number. Leave it empty for none.

Number Prefix

Text inserted directly before the number when Number Type is set to Standard. For example, use US$ to render values such as US$ 10.

Number Suffix

Text inserted directly after the number when Number Type is set to Standard. For example, use % to render values such as 10%.

Animation Speed Default: 1

The number of seconds the counter takes to complete its animation.

Animation Delay Default: 1

The number of seconds to wait before the counter animation starts after the module scrolls into view.

Style Tab​

The Style tab controls the colors and typography of the surrounding text and the number, along with the appearance of the circle and bar layouts when they are selected.

Text Color

The color applied to the Text Before Number and Text After Number content.

Text Typography Supports: Responsive

The font settings for the Text Before Number and Text After Number content.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Number Color

The color applied to the animated number, including any prefix and suffix.

Number Typography Supports: Responsive

The font settings for the animated number, including any prefix and suffix.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Circle Bar Styles

This group is available when Layout is set to Circle Counter.

Circle Bar Styles
Circle Size Default: 200

The overall width and height of the circle, in pixels.

Circle Stroke Size Default: 10

The stroke thickness of the circle, in pixels.

Circle Foreground Color Default: #f7951e

The color of the active progress portion of the circle.

Circle Background Color Default: #eaeaea

The color of the unfilled track behind the circle.

Bar Styles

This group is available when Layout is set to Bars Counter.

Bar Styles
Bar Foreground Color Default: #f7951e

The color of the active progress portion of the bar.

Bar Background Color Default: #eaeaea

The color of the unfilled track behind the bar.

Bar Height Default: 42; Supports: Responsive

The height of the bar, in pixels.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.