This project creates a configurable flip counter using CSS3 animations.
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
npm install flip-counter-js --save
<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>
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>
<link rel="stylesheet" type="text/css" href="./node_modules/flip-counter-js/dist/css/style.min.css"/>
var fc = new FlipCounterJs(document.getElementById('fcElement',{
speed: 0
});
fc.increment(10); // Add 10
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. |