Bar

The Bar works almost the same as the Counter. This counter also has a bar to visualise the numbers like a bar chart.

Most settings are also the same for this component.

Min range and Max range

By entering a min and a max value, the bar will use the range in between to animate its content. The min value is also the number that will be used as starting number for the counter part.

Steps

Here you can set the first number where the counter should count towards. You can add extra steps with the plus button. Make sure you give the steps a label name so it's easy to link to these steps.

Decimals

This will add decimal numbers when needed.

Show leading zero's

To keep the size of a counter at the same amount of digits you can check the box for leading zero's. That way the lower numbers will have zero's in front of them. For instance, the counter will count from 001 to 455. If you don't check the box it will go from 1 to 455 and will move when more digits are added.

Type

Some of the styling settings can be done in this section for this component. Things like spacing and bar size. The orientation and text position can also be configured here. If you just need the bar you can also hide the numbers here.

Text in front & Text after

You can put any text or characters in front or after the number. This is mostly used for % or currencies.

Animation

The duration can be set in milliseconds. You can also choose an easing for the animation.

The checkbox "Animate numbers" will let the number of the counter animate with a masked animation.

Styling

In a separate section in the right panel you can style the before text, counter, after text, background of the bar and indicator.

Updated on: 24/11/2023