Table of contents

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