MazAnimatedCounter
MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
4000
duration
You can set the duration of the animation with the duration
prop. The default value is 1000
ms.
4000
prefix and suffix
You can add a prefix and a suffix to the number with props or slots.
Be careful, you can't use both at the same time.
Prefixed
$ 20 $
$ 20 $
Suffixed
100 %%
100 %%
Props & Slots
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
count | The number to animate | number | - | |
duration | Duration of the animation in milliseconds@default 1000 | number | - | 1000 |
prefix | Suffix to display next to the number | string | - | undefined |
suffix | Suffix to display next to the number | string | - | undefined |
Slots
Name | Description | Bindings |
---|---|---|
prefix | Prefix slot - Add a prefix next to the number (e.g: "$") | |
suffix | Suffix slot - Add a suffix next to the number (e.g: "%") |