ashleylv/flip-counter

This project creates a configurable flip counter using CSS3 animations.

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 with id of "flipCounterJs" in your HTML template.

   <div id="flipCounterJs"></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"/>

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.