---
title: "MazAnimatedCounter"
description: "MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-animated-counter"
---

# MazAnimatedCounter

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

- Package: `maz-ui`
- Import: `import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-animated-counter

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

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

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

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

## MazAnimatedCounter API

`import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'`

### Props

- `count` (`number`, required): The number to animate.
- `duration` (`number`, default: `1000`): Duration of the animation in milliseconds.
- `prefix` (`string`): Suffix to display next to the number.
- `suffix` (`string`): Suffix to display next to the number.
- `delay` (`number`, default: `100`): Delay before the animation starts in milliseconds.
- `once` (`boolean`, default: `true`): Play the animation only once.

### Slots

- `#prefix`
- `#suffix`