Skip to content

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 nameDescriptionTypeValuesDefault
countThe number to animatenumber-
durationDuration of the animation in milliseconds
@default 1000
number-1000
prefixSuffix to display next to the numberstring-undefined
suffixSuffix to display next to the numberstring-undefined

Slots

NameDescriptionBindings
prefixPrefix slot - Add a prefix next to the number (e.g: "$")
suffixSuffix slot - Add a suffix next to the number (e.g: "%")