---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/number-counter'
title: 'Adding a Number Counter | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:33:16+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Animated number'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Number Counter'
      description: 'Animated number'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:33:16+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/number-counter'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/number-counter'
      description: 'Animated number'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Number Counter.

Animated number

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a number that counts up when visitors scroll to it, with a prefix, suffix and separator if you want them. Use it to make a key figure stand out, such as patients served or projects delivered.

## Add a number counter

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Number counter**. It lands at the top of the column and its settings dialog opens.
2. Type the **End** number to count up to, in digits only. Here we use 250000.
3. Add a **Suffix**, such as a plus sign.
4. Choose a **Thousands separator**. Here we pick **Comma**.
5. Set the **Speed** in milliseconds. Higher values count more slowly. Here we drag it to about 3000, which is 3 seconds.
6. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

The number counts up to the end number you typed, with your suffix and separator. In the video, it counts to 250,000+ in 3 seconds.

The count runs once, when the counter comes into view. In the editor, it runs right after you close the dialog. To watch it again, place the counter below the first screen, open the saved page and scroll down to it. Visitors see it once you save the page and it is published.

## Set up your number counter

Hover the element and open **More > Settings** in its control bar. Options:

- **Start:** the number the count begins at. The default is 0.
- **End:** the number the count stops at. The default is 100.
- **Font size:** the size of the number in pixels. The default is 30.
- **Speed:** how long the count takes, in milliseconds. The default is 2000.
- **Thousands separator:** None, Comma, Dot or Space between groups of thousands.
- **Prefix:** text before the number, such as `$` or `€`.
- **Suffix:** text after the number, such as `%` or `+`.

## If you don't see it

- **Number counter is not in the Content tab.** Your user profile hides it. Ask an administrator to tick **Counter** under **Elements** in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The number stops at 100.** **End** still has its default value. Hover the element and open **More > Settings**, then type your own number.
- **The number appears but does not count.** It already counted while it was in view, perhaps right after the page loaded. Preview does not restart it. Place the counter below the first screen, reload the saved page and scroll down to it.
- **The page still shows the old number.** The change was not saved. Click **Save** in the toolbar at the top of the content area, then reload.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your number counter.