Statistic ^0.1.23

Bind any number — it shows the starter first, then counts quickly to the target using a rAF-driven ease-out-cubic tween. Bind a timestamp instead and it becomes a live clock (countup, countdown, or auto). Every part of the DOM is class-bindable, so you can fully restyle it.

1. Bind a number

Just pass value — by default it animates from 0 to the target on mount.

vue

<script setup lang="ts">
import { VxStatistic } from 'veloxui'
</script>

<template>
  <VxStatistic :value="112893" />
  <VxStatistic :value="48200" />
  <VxStatistic :value="7" />
</template>

2. Custom starter (`from`)

Show a starting value first, then count up (or down) to the target.

From 100

From 1000 down

Negative start

vue

<VxStatistic :from="100" :value="9999" />
<VxStatistic :from="1000" :value="0" />      <!-- counts down -->
<VxStatistic :from="-500" :value="2500" />

3. Animation speed

Control the tween with duration (ms). Set animate="false" to skip animation.

Fast (400 ms)

Default (1000 ms)

Slow (3000 ms)

No animation

vue

<VxStatistic :value="5000" :duration="400" />
<VxStatistic :value="5000" :duration="3000" />
<VxStatistic :value="5000" :animate="false" />

4. Precision and separators

precision sets decimal places. groupSeparator / decimalSeparator control formatting.

0.00

0,00

Spaced

0.00

5 decimals

0.00000

vue

<VxStatistic :value="1234567.89" :precision="2" />
<VxStatistic :value="1234567.89" :precision="2"
             group-separator="." decimal-separator="," />
<VxStatistic :value="3.14159" :precision="5" />

5. Prefix / Suffix

Show units, currencies, or any icon around the number.

Revenue

$0.00

Conversion

0.0%

Rating

0.0 ★

Downloads

0 / month

vue

<VxStatistic :value="128459.45" prefix="$" :precision="2" />
<VxStatistic :value="68.4" suffix="%" :precision="1" />
<VxStatistic :value="4.7" :precision="1">
  <template #suffix><span style="color:#f59e0b"> ★</span></template>
</VxStatistic>

6. Trend indicator

trend="up" turns everything green and prepends ▲; trend="down" turns it red with ▼.

Sales

Churn

0.0%

Orders

vue

<VxStatistic :value="23480" prefix="$" trend="up" />
<VxStatistic :value="4.2" suffix="%" :precision="1" trend="down" />

7. Countdown — bind a future timestamp

Pass a Date, millisecond timestamp, or ISO string. If it's in the future, the component counts down tick-by-tick (second by default). The finish event fires at zero.

Next hour

00:00:00

New year

00:00:00

Launch in

00:00:00

vue

<script setup lang="ts">
import { computed } from 'vue'
const inOneHour = computed(() => Date.now() + 60 * 60 * 1000)
</script>

<template>
  <VxStatistic title="Next hour" :timestamp="inOneHour" />
  <VxStatistic title="New year" :timestamp="new Date(2027, 0, 1)" />
</template>

8. Count-up from a past timestamp

If the timestamp is in the past, mode auto flips to count-up (elapsed time).

Running for

00:00:00

Since login

00:00:00

vue

<script setup lang="ts">
const launchedAt = Date.now() - 2 * 3600 * 1000
</script>

<template>
  <VxStatistic title="Running for" :timestamp="launchedAt" />
</template>

Force a specific direction with mode="countup" or mode="countdown".

vue

<VxStatistic :timestamp="someTime" mode="countup" />
<VxStatistic :timestamp="someTime" mode="countdown" />

9. Custom time format

Tokens: DD / D (days), HH / H (hours 0–23), mm / m (minutes 0–59), ss / s (seconds 0–59), SSS (ms). Wrap literal text in [brackets].

00d 00h 00m 00s

0 days, 00:00:00

00:00

00h 00m

vue

<VxStatistic :timestamp="target" time-format="DD[d] HH[h] mm[m] ss[s]" />
<VxStatistic :timestamp="target" time-format="mm:ss" />
<VxStatistic :timestamp="target" time-format="HH[h] mm[m]" />

10. Function-based time format

Pass a function for fully custom output.

Human

Raw ms

0 ms

vue

<script setup lang="ts">
const human = (ms: number) => {
  const s = Math.floor(ms / 1000)
  const h = Math.floor(s / 3600)
  const m = Math.floor((s % 3600) / 60)
  const sec = s % 60
  if (h) return `${h}h ${m}m ${sec}s`
  if (m) return `${m}m ${sec}s`
  return `${sec}s`
}
</script>

<template>
  <VxStatistic :timestamp="launchedAt" :time-format="human" />
</template>

11. Fully customizable — class-bindable

Every visual part accepts its own class binding (rootClass, titleClass, valueClass, numberClass, prefixClass, suffixClass, trendClass). Combine with :value-style for inline CSS.

Gradient

Pill

Code

00:00:00

vue

<template>
  <VxStatistic :value="48240" prefix="$"
    root-class="my-stat"
    title-class="my-stat__t"
    number-class="my-stat__n"
    prefix-class="my-stat__p"
  />
</template>

<style>
.my-stat__t { color: #8b5cf6; text-transform: uppercase; letter-spacing: 0.08em; }
.my-stat__n {
  background: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.my-stat__p { color: #a78bfa; font-weight: 700; }
</style>

12. Sizes, loading, and controls (ref API)

Three sizes, a skeleton loader, and an exposed start() / pause() / reset() API via template ref.

Small

Default

Large

Controlled

vue

<script setup lang="ts">
import { ref } from 'vue'
const statRef = ref()
function restart() { statRef.value.reset(); statRef.value.start() }
</script>

<template>
  <VxStatistic ref="statRef" :value="9999" :duration="2000" />
  <button @click="restart">Restart</button>
</template>

13. Live dashboard

When the bound value changes while animating, the component smoothly eases from the current display to the new target.

Live visitors

Revenue

Churn

0.0%

vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const live = ref(0)
onMounted(() => {
  setInterval(() => { live.value += Math.floor(Math.random() * 50) }, 2500)
})
</script>

<template>
  <VxStatistic title="Live visitors" :value="live" trend="up" />
</template>

Props

Prop	Type	Default	Description
`value`	`number \| string`	`0`	Target value (number mode)
`from`	`number \| string`	`0`	Starter value the counter begins from
`animate`	`boolean`	`true`	Tween from `from` to `value` with rAF
`duration`	`number`	`1000`	Animation duration in ms
`autoStart`	`boolean`	`true`	Start on mount (set `false` for manual `start()`)
`precision`	`number`	`0`	Decimal places
`groupSeparator`	`string`	`','`	Thousands separator
`decimalSeparator`	`string`	`'.'`	Decimal separator
`timestamp`	`Date \| number \| string \| null`	`null`	If set, switches to time mode
`mode`	`'auto' \| 'countup' \| 'countdown'`	`'auto'`	Direction when in time mode
`timeFormat`	`string \| (ms:number)=>string`	auto	Format tokens (`DD HH mm ss SSS`) or function
`interval`	`number`	`1000`	Time-mode tick rate in ms (min 16)
`title`	`string`	`''`	Label shown above value
`prefix`	`string`	`''`	Text before value
`suffix`	`string`	`''`	Text after value
`size`	`'small' \| 'default' \| 'large'`	`'default'`	Size preset
`trend`	`'up' \| 'down' \| null`	`null`	Colored directional arrow
`loading`	`boolean`	`false`	Show skeleton placeholder
`valueStyle`	`string \| object`	—	Inline style on the value element
`rootClass` / `titleClass` / `valueClass` / `numberClass` / `prefixClass` / `suffixClass` / `trendClass`	`string \| string[] \| object`	`''`	Class bindings for every DOM part

Events

Event	Payload	When
`tick`	`ms: number`	Fires on every time-mode tick
`finish`	—	Countdown reached zero
`update:display`	`number \| string`	Displayed value changed (animation or tick)

Exposed methods (ref)

Method	Description
`start()`	Start/resume animation or timer
`pause()`	Stop rAF and interval
`reset()`	Return to `from` (number) or zero (time) without starting

Slots

Slot	Props	Description
default	`{ display }`	Override the value body entirely
`title`	—	Custom title content
`prefix`	—	Custom prefix (icons, text)
`suffix`	—	Custom suffix (icons, units)

Statistic ^0.1.23 ​

1. Bind a number ​

2. Custom starter (from) ​

3. Animation speed ​

4. Precision and separators ​

5. Prefix / Suffix ​

6. Trend indicator ​

7. Countdown — bind a future timestamp ​

8. Count-up from a past timestamp ​

9. Custom time format ​

10. Function-based time format ​

11. Fully customizable — class-bindable ​

12. Sizes, loading, and controls (ref API) ​

13. Live dashboard ​

Props ​

Events ​

Exposed methods (ref) ​

Slots ​

Statistic ^0.1.23

1. Bind a number

2. Custom starter (`from`)

3. Animation speed

4. Precision and separators

5. Prefix / Suffix

6. Trend indicator

7. Countdown — bind a future timestamp

8. Count-up from a past timestamp

9. Custom time format

10. Function-based time format

11. Fully customizable — class-bindable

12. Sizes, loading, and controls (ref API)

13. Live dashboard

Props

Events

Exposed methods (ref)

Slots