> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Counter

One of the default components we added to the editor is the counter. It can show numbers counting from one number to the next. Because it has multiple states you can let it animate or count between different states. This can be done by linking to these states in the links panel.

**From value**
This is the starting number where the counters begins to count.

**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 with the 'control element' click action.

**Duration**
The duration can be set in milliseconds. The counter will use the time to go from the starting number to the next step.

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

**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**
In the animation tab you can choose a masked transition which will animate the numbers a bit by letting them move in a masked area. Try it out to see the result.

**Styling**
In a separate section in the right panel you can style the before text, counter and after text.