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.
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