Components
Counting Number
Number counter with various animation effects.
Counting Number
The CountingNumber component creates animated number counters with various animation effects. It's perfect for displaying statistics, metrics, and any numerical data that benefits from a counting animation.
Usage
With Delay and Formatting
0
<template>
<MCountingNumber :to="1000" />
</template>
Props
from
number
Starting number.
to
number
Ending number.
duration
number
Animation duration in seconds.
delay
number
Animation delay in milliseconds.
class
string
CSS classes to apply to the component.
startOnView
boolean
Whether to start animation when element enters viewport.
once
boolean
Whether to animate only once.
inViewMargin
string
Margin for viewport detection.
format
function
Custom formatting function.
Events
complete
() => void
Emitted when animation completes.
Examples
Basic Counting Number
Growth Metrics
Community Impact
Real-time statistics showing the growth and impact of our platform
0
Community Members
+12.5% this month
0
Lines of Code
+8.3% this quarter
0
GitHub Stars
+15.2% this year
0
Countries
+3 new this month
Growth Trends
Historical data and growth patterns
Interactive growth chart
Visualization would appear here
<template>
<MCountingNumber :to="1500" />
</template>
With Custom Duration
100
<template>
<MCountingNumber :from="100" :to="5000" :duration="3" />
</template>
With Custom Styling
0
<template>
<MCountingNumber :to="75" class="text-3xl font-bold text-blue-600" />
</template>