jQuery Counter Plugin Examples

0:10

    <span class="counter counter-analog" data-direction="down">0:10</span>
    <script>
    $('.counter').counter({});
    </script>
    

20.00:00:00

    <span class="counter counter-analog" data-direction="down" data-format="20.23:59:59">20.00:00:00</span>
    <script>
    $('.counter').counter({});
    </script>
    

0

    <span class="counter counter-analog" data-direction="up" data-interval="1" data-format="9999" data-stop="2012">0</span>
    <script>
    $('.counter').counter({});
    </script>
    

0

    <span class="counter counter-analog" data-direction="up" data-format="1 1 1 1 1 1 1 1" data-stop="0 0 1 0 0 0 0 0" data-interval="100">0</span>
    <script>
    $('.counter').counter({});
    </script>
    

Style counter-analog2

0:00.0

    <span class="counter counter-analog2" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100">0:00.0</span>
    <script>
    $('.counter').counter({});
    </script>
    

Style counter-analog3

0:00.0

    <span class="counter counter-analog3" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100">0:00.0</span>
    <script>
    $('.counter').counter({});
    </script>
    

Full Javascript Initialization

        <span id="custom"></span>
        <script>
        $('#custom').addClass('counter-analog').counter({
            initial: '0:00.0',
            direction: 'up',
            interval: '1',
            format: '9999',
            stop: '2012'
        });
        </script>
        

Event counterStop

    <script>
    $('.counter').on('counterStop', function() {
        //code
    });
    </script>