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

<template>
  <MazAnimatedCounter :count="4000" />
</template>

<script lang="ts" setup>
  import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'
</script>

duration

You can set the duration of the animation with the duration prop. The default value is 1000 ms.

4000

<MazAnimatedCounter :count="4000" :duration="5000" />

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

<p class="maz-font-semibold">
  Prefixed
</p>

<MazAnimatedCounter :count="20" prefix="$" />

<MazAnimatedCounter :count="20">
  <template #prefix>$</template>
</MazAnimatedCounter>

<p class="maz-font-semibold">
  Suffixed
</p>

<MazAnimatedCounter :count="100" suffix="%" />

<MazAnimatedCounter :count="100">
  <template #suffix>%</template>
</MazAnimatedCounter>

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: "%")