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

443250

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

40000

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

Suffixed

100%0%
100%0%

<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

Name	Description	Type	Required	Default
count	The number to animate	number	Yes	undefined
duration	Duration of the animation in milliseconds	number	No	1000
prefix	Suffix to display next to the number	string	No	undefined
suffix	Suffix to display next to the number	string	No	undefined
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