https://github.com/azi3/flip-counter

This project creates a configurable flip counter using CSS3 animations.
https://github.com/azi3/flip-counter

css es6 frontend-web sass webpack

Last synced: 2 days ago
JSON representation

This project creates a configurable flip counter using CSS3 animations.

• Host: GitHub
• URL: https://github.com/azi3/flip-counter
• Owner: AZI3
• Created: 2018-02-19T02:55:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-14T13:05:58.000Z (over 6 years ago)
• Last Synced: 2024-09-25T01:09:16.221Z (2 days ago)
• Topics: css, es6, frontend-web, sass, webpack
• Language: JavaScript
• Homepage: https://brianjzhang.github.io/flip-counter/
• Size: 154 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# flip-counter [![NPM version](https://img.shields.io/npm/v/flip-counter-js.svg)](https://www.npmjs.com/package/flip-counter-js)

> 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](https://brianjzhang.github.io/flip-counter/dist/index.html)

## Installation

``` bash

 npm install flip-counter-js --save

```

## Usage

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

    ``` html

    


    ```

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

    ``` javascript

    import FlipCounter from 'flip-counter-js';

    ```

    Else you can find it on global `window` object.

    ``` javascript

    

    ```    

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

    ``` html

    

    ```  

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

    ``` javascript

        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.