Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/websmurf/vue-progress-button

Animated button for VueJS
https://github.com/websmurf/vue-progress-button

animation button progress vuejs

Last synced: about 2 months ago
JSON representation

Animated button for VueJS

Lists

README 

        
# Notify



[![Build Status](https://travis-ci.org/websmurf/vue-progress-button.svg?branch=master)](https://travis-ci.org/websmurf/vue-progress-button)

[![Coverage Status](https://coveralls.io/repos/github/websmurf/vue-progress-button/badge.svg?branch=master)](https://coveralls.io/github/websmurf/vue-progress-button?branch=master)



A simple button that displays progress. Compatible with Vue 2.x



Inspired by the button animations displayed on [https://tympanus.net/Development/ProgressButtonStyles/](https://tympanus.net/Development/ProgressButtonStyles/)



## Install



```

$ npm install vue-progress-button --save

```



## Usage



Inside your component:



To get the most basic version of a progress button

```html

Button

```



The progress can be configured with another filling color. Simply add the fill-color property to the progress button element and give a color to it.



```html

Other fill color

```



The progress also be modified in terms of duration of the progress, position of the progress line

```html

10 second animation

Bottom fill

Top fill

```



```js

import Button from 'vue-progress-button'



export default {

  components: {

    'progress-button': Button

  }

}

```



## Configuration options



Option    | Type   | Default | Description  

--------- | ------ | ------- | ------------

fillColor | String | '#555'  | The color of the progress bar filling the button

duration  | Number | 2000    | The duration of the progress bar filling the entire button in milliseconds

height    | Number | 100     | The height of the progress bar in px

position  | String | 'fill'  | The position of the progress bar in the button, currently possible: top, bottom. Defaults to fill that fills the entire button