flip-counter

This is a Flip Counter component with CSS3 animation style. It can be extended to use as a timer, countdown or else that can be represented with digits. demo

Installation

 npm install flip-counter-js --save

Usage

1. Create an element, e.g. <div> in your HTML template and set data-flip-counter-js attribute on this element. Refer to the options and configure it as required.

   <div data-flip-counter-js data-fc-size="lg" data-fc-step="11" data-fc-speed="500"
            data-fc-minDigits="10"
            data-fc-start="10"></div>

2. Import FlipCounterJs module. The JavaScript file is generated by Webpack and it supports both CommonJs and AMD.

   import FlipCounter from 'flip-counter-js';

   Else you can find it on global window object.

   <script src="node_modules/flip-counter-js/dist/flip-counter-js.js"></script>

3. Finally don't forget to include the css style.

   <link rel="stylesheet" type="text/css" href="./node_modules/flip-counter-js/dist/css/style.min.css"/>

4. There is another way to create an instance using JavaScript API:

       var fc = new FlipCounterJs(document.getElementById('fcElement',{
           speed: 0
       });
          
       fc.increment(10); // Add 10

Options

Property|Type|Default|Description ---|---|---|--- step|Number|1|The amount by which the value increases every time. speed|Number|0|The rate at which the value increases. Unit is milliseconds. Minimum value is 500. If the value is 0, the counter won't increment/decrement automatically. minDigits|Number|4|The minimum number of digits to show. You may expect leading zeros. start|Number|0|The initial value. size|String|'sm'|Possible values: xs, sm, md, lg. mode|String|'up'|Possible values: up or down. Set mode as up to count up, or down to count down.