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

8831388313

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

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

duration

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

40004000

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

Suffixed

100%100%
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
delay	Delay before the animation starts in milliseconds @default 100	number	-	100
once	Play the animation only once @default true	boolean	-	true

Slots

Name	Description	Bindings
prefix
suffix