Animated numbers are a powerful way to visualize data and build trust with your visitors. Whether you’re showcasing project completion rates, client satisfaction scores, or financial milestones, these elements turn static data into an engaging experience.
You can choose from two element types:
Number
Stats, which consists of these layout types:
- Donut
- Half Donut
- Ring
- Progress Bar
How to Add the Element
There are two ways to add a number/stats (or any other) element to your page:
In a new section: Click the plus (+) sign in the center of any empty section.
In an existing section: Hover over the section to reveal the control bar in the top-left corner and click the burger icon (three lines).
Once the element list opens, scroll down to the "Number" category or use the search bar to find it quickly.
Configure Content & Values
Let’s take a look at the settings, which define the data your element will display. Click on the element to open the settings:
Value: Enter the final number you want the element to reach (e.g., 50).
Max: Set the total limit for the calculation. The animation uses this to determine how much of the donut or bar to "fill." For example, if your value is 50 and your max is 100, the bar will fill to 50%.
Description: An optional text field to add a label or context below the number.
Suffix & Prefix (only for the "Number" element): allows you to add text before and after the animated number
Display Format: Choose how your number appears. You can select from Number, Percent, Currency, Distance, Area, Volume, or Mass.
Add Item: Use this to group multiple numbers together. If you add more than one, the pencil icon in the top-left will change to a burger icon, allowing you to switch between and manage each specific number in the group.
Customize Design & Animation
To change the visual style, click the element and switch to the second tab (the gear icon).
Here you can fine-tune the look:
Layout Type: Switch between the five different styles (Donut, Bar, etc.).
Layout Settings: Adjust the specific geometry, such as line thickness, shape size, edge radius, and colors.
Number Settings: Customize the size and color of both the main digits and the unit symbol.
Description settings (appear only if a description has been added): Customize the size and color of the description text.
Animation Settings: Control the type of motion and the speed of the count-up. You can also use the preview option to see the animation in action without having to publish the page.
Frequently Asked Questions (FAQ)
When does the animation start?
When does the animation start?
The animation is scroll-triggered. This means the numbers will only start counting up once the element becomes visible in the visitor's browser window. If the element is at the bottom of the page, the animation won't play until the user scrolls down to it.
Can I display decimals (e.g., 95.5%)?
Can I display decimals (e.g., 95.5%)?
Absolutely. Simply type in your value and separate the decimals with a dot.
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂