MazAnimatedCounter

MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

71938071938

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

const count = ref(Math.floor(Math.random() * 99999))

onMounted(() => {
  setInterval(() => {
    count.value = Math.floor(Math.random() * 99999)
  }, 3000)
})
</script>

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

duration

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

400004000

<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$0$20
$20$0$20

Suffixed

100%0%100%
100%0%100%

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

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

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

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

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

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

Props

Name	Description	Type	Required	Default	Possible values
count	The number to animate	number	Yes	-	-
duration	Duration of the animation in milliseconds	number	No	1000	-
prefix	Suffix to display next to the number	string	No	-	-
suffix	Suffix to display next to the number	string	No	-	-
delay	Delay before the animation starts in milliseconds	number	No	100	-
once	Play the animation only once	boolean	No	true	-

Slots

Name	Description	Bindings
prefix		-
suffix		-