https://github.com/LucasLeandro1204/vue-twitter-counter

Counter component inspired in Twitter with Vue
https://github.com/LucasLeandro1204/vue-twitter-counter

animation counter progress twitter ui ux vue vuejs

Last synced: about 2 months ago
JSON representation

Counter component inspired in Twitter with Vue

• Host: GitHub
• URL: https://github.com/LucasLeandro1204/vue-twitter-counter
• Owner: LucasLeandro1204
• License: mit
• Created: 2017-11-08T03:33:46.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-29T23:59:06.000Z (about 7 years ago)
• Last Synced: 2024-11-25T05:57:43.283Z (about 2 months ago)
• Topics: animation, counter, progress, twitter, ui, ux, vue, vuejs
• Language: Vue
• Homepage: https://lucasleandro1204.github.io/vue-twitter-counter/
• Size: 928 KB
• Stars: 35
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Twitter Counter

Counter component inspired in Twitter with Vue

![](https://github.com/LucasLeandro1204/vue-twitter-counter/raw/master/static/counter-example.gif)

> You can see examples in [here](https://lucasleandro1204.github.io/vue-twitter-counter/)

## Getting started

### Install

Simple install it via npm (or yarn if you want to)

``$ npm install vue-twitter-counter --save``

### Usage

It's super easy to use it =)

``` vue

  

  

```

It's super easy to use it =)

The only thing you HAVE to do is pass the `current-length` prop.

### Props list

| Prop          | Type    | Default  | Description                                |

|:-------------:|:-------:|:--------:|:------------------------------------------:|

| warnLength    | Number  | 20       | The min rest to show the warns             |

| dangerAt      | Number  | 280      | The length to be in danger                 |

| currentLength | Number  | REQUIRED | The current length of whatever you want to |

| underlay      | String  | #ccd6dd  | Underlay counter color                     |

| safe          | String  | #1da1f2  | Safe color                                 |

| warn          | String  | #ffad1f  | Warn color                                 |

| danger        | String  | #e0245e  | Danger color                               |

| round         | Boolean | false    | Round progress circle edges                |

| animate       | Boolean | false    | Animate the progress circle                |

| speed         | Number  | 150      | The animation speed in ms                  |

_Color props are required to be HEX with hash prefix, they are validate =)_

## Development

If you want to help this project, first of all clone it

``$ git clone [email protected]:LucasLeandro1204/vue-twitter-counter.git``

To run for development run

``$ npm run dev``

This will host the application at localhost:8080

To build for production run

``$ npm run build``

The above command bundle the app and also features minification to help reduce file size

## License

MIT