Articles on: The editor

Gauge

The Gauge is an element that shows a half, three-quarter or full ring with a number in the middle. When the gauge plays, the ring fills to a value you choose while the number counts up or down to that value. The Gauge works like the Counter and Bar elements, but shows the value as a ring.

Adding a gauge

To add a gauge and set its value:

Click Add in the left panel.
Open the Numbers category and drag Gauge onto the canvas.
With the gauge selected, click Settings in the Gauge block of the right panel. You can also double-click the gauge on the canvas.
In the values tab, enter the Min range and Max range.
Enter the From value the gauge starts from.
Under Value step(s), enter the To value the gauge animates to.
In the layout tab, choose the Type of ring and set the ring widths and colors.
In the text tab, enter any Text before or Text after the number, for example %.
Close the Settings popover with the × in its top corner.
Click Restart in the Gauge block of the right panel to preview the animation.

Gauge settings

Almost all settings for the gauge's ring, number and animation are in the gauge's Settings popover. To open it, select the gauge and click Settings in the Gauge block of the right panel, or double-click the gauge on the canvas. The popover has four tabs: values, layout, text and animation. The font styling of the number and its text is set in the right panel's Styling block instead.

Gauge range, start value and steps

The values tab of the gauge's Settings popover sets the scale of the ring, the value the gauge starts at, and the value or values the gauge moves to:

Min range: the value at which the ring is empty.
Max range: the value at which the ring is full. The ring fills in proportion to where the current value sits between Min range and Max range. For example, with a Min range of 0 and a Max range of 200, a value of 50 fills a quarter of the ring's length.
From value: the value the gauge starts at. The number counts from it, and the ring starts filled to it. From value is separate from Min range: with a Min range of 0 and a From value of 50, the gauge starts at 50 with the ring already partly filled.
Auto Start: when checked (the default), the gauge plays by itself. When unchecked, the gauge waits until another element starts it with the Control element click action.
Value step(s): each step has a Label and a To value. The To value is the number the gauge counts and fills to. With one step, the gauge always moves to that value. Click + to add more steps; the trash icon deletes the current step, and the dots or arrows switch between steps. There is no limit on the number of steps.

Gauge number format

The Counter heading in the values tab of the gauge's Settings popover controls how the number in the middle of the gauge is written:

Decimals: the number of decimal places, always shown. With Decimals set to 2, the number 70 shows as 70.00.
Thousands separator: Automatic (based on browser language), Disable, Period (10.000,00) or Comma (10,000.00). Automatic is the default.
Leading zero's: when checked, lower numbers get zeros in front so the number always has the same number of digits as the largest To value. For example, the counter counts from 001 to 455 instead of from 1 to 455. Without leading zeros, the number gets wider as digits are added.

Gauge type and ring layout

The layout tab of the gauge's Settings popover sets the shape and look of the ring:

Type: Half circle (180), Semi circle (270) or Full Circle (360). Half circle is the default.
Rounding: the shape of the ends of the ring: Round, Butt or Square.
Background width and Bar width: the thickness of the empty part of the ring and of the filled part.
Background color and Bar color: the color of the empty part of the ring and of the filled part.

Text before and after the gauge number

The text tab of the gauge's Settings popover adds text or characters around the number, such as % or a currency sign:

Text before: shown in front of the number.
Text after: shown after the number. It is set to % by default.

Gauge animation

The animation tab of the gauge's Settings popover sets how the gauge moves to its value:

Animation duration: how long the animation takes, in milliseconds.
Ease: the speed curve of the animation: Ease In, Ease Out or Ease In Out.
Animate numbers: when checked, the digits roll into place like a counter wheel instead of changing in place.

When Scrub on scroll is turned on for the gauge, scrolling drives the animation, so Auto Start, Animation duration, Ease and Animate numbers are greyed out.

Controlling a gauge with multiple steps

A gauge with multiple steps moves between values when a visitor clicks another element, such as a button. The gauge starts at its first step. To set this up:

Select the gauge and click Settings in the Gauge block of the right panel.
In the values tab, click + next to Value step(s) to add a step.
Give each step a Label and a To value.
Close the Settings popover with the × in its top corner.
Select the element that should control the gauge, for example a button.
In the right panel, open the Links tab.
Click Control element in the list of click actions.
Under Element, choose the gauge.
Under Action, choose a step's label to move the gauge to that step, or choose Next or Previous.

The Action list for a gauge also has Play and (Re)Start. Play plays the gauge's animation to its current step. (Re)Start resets the gauge to its From value and first step, and plays it again. Next after the last step goes back to the first step, and Previous before the first step goes to the last step.

To preview a step in the editor, select the gauge and click the step's label in the Gauge block of the right panel.

Styling the gauge number and text

The font styling of the number in the middle of the gauge is set in the Styling block of the right panel, not in the gauge's Settings popover. Select the gauge to see the Styling block. It has three items:

Before text: the text in front of the number.
Counter: the number itself.
After text: the text after the number.

Each item has font settings and alignment; Counter also has padding. The colors and widths of the ring are set in the layout tab of the gauge's Settings popover.

Frequently asked questions

Why doesn't my gauge number start at the Min range value?

The gauge starts at the From value, not at the Min range: the number counts from the From value and the ring starts filled to it. Min range and Max range only set when the ring is empty and when it is full. To change the starting number, select the gauge, click Settings in the Gauge block of the right panel, and change From value in the values tab.

How do I make a gauge animate only when a button is clicked?

Turn off Auto Start and let the button start the gauge:

Select the gauge and click Settings in the Gauge block of the right panel.
In the values tab, uncheck Auto Start.
Select the button.
In the right panel, open the Links tab and click Control element in the list of click actions.
Under Element, choose the gauge.
Under Action, choose Play or (Re)Start.

Why are the gauge's animation settings greyed out?

The gauge's Auto Start, Animation duration, Ease and Animate numbers settings are greyed out when Scrub on scroll is turned on for the gauge. With Scrub on scroll, the visitor's scrolling drives the animation instead. Turn off Scrub on scroll in the right panel's Settings tab to use these settings again.

Where do I change the color of the gauge ring?

The ring's colors are in the gauge's Settings popover, not in the Styling block. Select the gauge, click Settings in the Gauge block of the right panel, and open the layout tab. Bar color sets the filled part of the ring and Background color sets the empty part.

Updated on: 29/10/2026