Articles on: The editor

Bar

The Bar is an element that shows an animated number next to a bar that fills up like a bar chart. On the published page, the number counts to the value you set and the bar fills to match. It works like the Counter, with a bar added. You find the Bar in the Numbers category of the Add elements panel. In the right panel and in its settings popup, the Bar is called "Counter Bar".


Opening the Bar settings


To open the settings of a Bar:


  1. Select the Bar on the canvas.
  2. In the right panel, click Settings in the Counter Bar block. You can also double-click the Bar on the canvas.
  3. Choose a tab at the top of the popup: Values, Layout, Text or Animation.


Setting the start value, range and steps


The Values tab of the Bar settings sets where the number and bar start, what counts as an empty and a full bar, and which value the Bar animates to:


  • From value: the number the counter and the bar start from. The default is 0.
  • Min range and Max range: the values that count as an empty bar and a full bar. The defaults are 0 and 100. The bar's fill is the value's position within this range, so with a range of 0 to 200, a value of 50 fills a quarter of the bar. Keep your step values within the range: a value above Max range shows a full bar and a value below Min range shows an empty bar, while the number still shows the actual value.
  • Auto Start: when checked (the default), the Bar animates as soon as it scrolls into view. When unchecked, the Bar waits until a Control element click action starts it.
  • Value step(s): each step has a Label and a To value. When the Bar starts, it animates to the To value of the first step. Additional steps are reached through a Control element click action, as described in Moving the Bar between steps with a click.


Formatting the number of the Bar


The Counter section of the Values tab in the Bar settings controls how the number is displayed:


  • Decimals: the number of decimal places that is always shown. For example, with 2 decimals, 45 is shown as 45.00. The default is 0.
  • Thousands separator: the marks used for thousands and decimals. Period (10.000,00) uses a period for thousands and a comma for decimals, Comma (10,000.00) the other way round, and Automatic (based on browser language) follows the visitor's browser language. Disable removes the thousands mark; the decimal mark then follows the browser language.
  • Leading zero's: adds zeros in front of the number so it keeps the same number of digits while counting. The number of digits matches the largest To value among the steps. For example, the counter counts from 001 to 455 instead of from 1 to 455, so the number doesn't change width as digits are added.


Changing the bar layout


The Bar type section on the Layout tab of the Bar settings controls the layout of the bar and its text:


  • Spacing (px): the space around the filled part of the bar, inside the bar's background.
  • Bar size (px): the thickness of the filled part of the bar.
  • Orientation: Horizontal or Vertical.
  • Text position: Top, Bottom, Left or Right of the bar.
  • Flip counter & description: moves the number and its text to the opposite end of the bar, for example from the left to the right.
  • Hide counter number: hides the number and its text before and after, so only the bar is shown.


Adding text before or after the number


On the Text tab of the Bar settings, you can add text or characters around the number of the Bar. This is mostly used for a % sign or a currency.


  • Text before: shown in front of the number.
  • Text after: shown after the number. The default is %.


Setting the animation of the Bar


The Animation tab of the Bar settings controls how the number and bar animate:


  • Animation duration: the length of the animation in milliseconds. The default is 1000.
  • Ease: the speed curve of the animation: Ease In, Ease Out or Ease In Out.
  • Animate numbers: when checked, the digits roll into place instead of changing in place.


When scrub on scroll is on for the Bar, the scroll position drives the animation. Auto Start, Animation duration, Ease and Animate numbers are then disabled.


Styling the Bar


To style the text and the bar of a Bar, select the Bar on the canvas and use the Styling block in the right panel. It has a separate part for each piece of the Bar:


  • Before text: the text in front of the number.
  • Counter: the number.
  • After text: the text after the number.
  • Background bar: the empty part of the bar.
  • Indicator: the filled part of the bar.


Moving the Bar between steps with a click


A Bar with several steps can move to a specific step when a visitor clicks another element, such as a button. To set this up:


  1. Select the Bar on the canvas, click Settings in the right panel and go to the Values tab.
  2. In Value step(s), enter a Label and a To value for the first step.
  3. Click + to add a step.
  4. Enter a Label and a To value for the new step. Repeat steps 3 and 4 for each extra step.
  5. Select the element visitors should click, such as a button.
  6. Add a click action to it and choose Control element.
  7. Under Element, choose the Bar.
  8. Under Action, choose the step by its label. You can also choose Next or Previous to move one step forward or back, or Play, Pause or (Re)Start.


Give each step a clear label, because the label is how you find the step in the Action list. Next on the last step goes back to the first step, and Previous on the first step goes to the last. With two or more steps, the right panel shows a button with each step's label, so you can preview each step in the editor. With one step, the right panel shows a Restart button that replays the animation in the editor.


Frequently asked questions


Why does my Bar not animate?


A Bar doesn't play its animation on its own in these cases:


  • Auto Start is unchecked in the Values tab of the Bar settings. The Bar then shows its From value until a Control element click action starts it.
  • Scrub on scroll is on for the Bar. The scroll position then drives the animation instead.
  • The visitor has "reduce motion" switched on in their device settings. The Bar then shows the final value without animation.


What is the difference between From value and Min range in the Bar?


From value is the number the Bar's counter and bar start from. Min range and Max range only set the scale of the bar: Min range is the value that counts as an empty bar and Max range the value that counts as a full bar. Both settings are on the Values tab of the Bar settings.


Can a button move the Bar to another value?


Yes. Add a step for each value in Value step(s) on the Values tab of the Bar settings, and give each step a label. Then give the button a Control element click action, choose the Bar under Element and the step's label under Action.


Why does the number of my Bar show extra zeros?


Extra zeros come from two settings in the Counter section of the Values tab in the Bar settings. Decimals always shows the set number of decimal places, so 2 decimals shows 45 as 45.00. Leading zero's adds zeros in front of the number, up to the number of digits of the largest To value. Set Decimals to 0 or uncheck Leading zero's to remove them.

Updated on: 20/10/2026