Counter
Create animated number counter with simple Metro 4 component.
About
The counter component is a simple Metro 4 plugin for creating animated number counter from 0 to defined value.
0
<div>
<button class="button success"
onclick="$('#counter').data('counter').start()">
Start</button>
<button class="button alert"
onclick="$('#counter').data('counter').reset()">
Reset</button>
</div>
<div class="h1" data-role="counter"
data-value="100" id="counter">0</div>
Options
The counter component contains a number of options for defining behavior:
| Option | Data-* | Default | Desc |
|---|---|---|---|
| delay | data-delay |
10 | Delay interval in ms |
| step | data-step |
1 | Step for animation |
| value | data-value |
0 | Counter end value |
| timeout | data-timeout |
null | If defined (in ms), then counter start after this interval |
| delimiter | data-delimiter |
, | Delimiter for number sections |
Events
When counter works, it generated the numbers of events.
You can use callback for this event to behavior with component.
| Event | Data-* | Desc |
|---|---|---|
| onTick(value, el) | data-on-tick |
Fired when counter ticked |
| onStart(el) | data-on-start |
Fired when counter started |
| onStop(el) | data-on-stop |
Fired when counter stopped |
| onCounterCreate(el) | data-on-counter-create |
Fired when counter was created |
Methods
Component counter contains method to interact with it.
- start() - start counting
- reset() - reset counter for starting again