Gauge
Like the counter and counter bar this element counts and animates towards a chosen state. The design can be configured in multiple ways.
Min range and Max range
By entering a min and a max value the circle chart 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.
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.
Min range and Max range
By entering a min and a max value the circle chart 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.
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