vue-button-spinner

A simple button spinner.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-button-spinner
3612.2.16 years ago7 years agoMinified + gzip package size for vue-button-spinner in KB

Readme

VueButtonSpinner
npm version
Simple VUE 2 component to create a button spinner. The perfect solution for your submit buttons!
alt tag
Features
  • Show an css loader into the button to indicate the request status.
  • Add a custom html inside the component.
  • Pure CSS loaders, no fonts or images have been used.
  • Different styles for each state: loading, success, error.
  • Available props:
* 'isLoading' (boolean) to show the spinner
* 'status' (String | Boolean) allow 'success' or true and 'error' or false.
  • Remember use the .native modifier for the events (docs)
Install
``npm install vue-button-spinner``
Usage

Example:

Your .vue component (vue-loader with webpack or use vue-cli projects) ```js import VueButtonSpinner from 'vue-button-spinner'; export default {
name: 'events-form',
data() {
return {
isLoading: false,
status: '',
}
},
components: {	
VueButtonSpinner
},
methods: {
onSubmit() {
this.isLoading = true
$someRequest('/url', 'GET')
.then(response => {
this.isLoading = false
this.status = true // or success
setTimeout(() => { this.status = '' }, 2000) // to clear the status :)
})
.catch(error => {
console.error(error)
this.isLoading = false
this.status = false //or error
})
}
}
} ``` Your HTML code ```html :is-loading="isLoading"
:disabled="isLoading"
:status="status">
<span>Submit</span>
```