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

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

animation button progress vuejs

Last synced: 9 days ago
JSON representation

Animated button for VueJS

• Host: GitHub
• URL: https://github.com/websmurf/vue-progress-button
• Owner: websmurf
• Created: 2017-07-20T07:34:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-08T08:01:02.000Z (over 6 years ago)
• Last Synced: 2024-10-29T10:55:04.697Z (18 days ago)
• Topics: animation, button, progress, vuejs
• Language: JavaScript
• Size: 303 KB
• Stars: 75
• Watchers: 3
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

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