VueButtonSpinner
Simple VUE 2 component to create a button spinner. The perfect solution for your submit buttons!
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)]
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]
<vue-button-spinner :is-loading="isLoading" :disabled="isLoading" :status="status"> <span>Submit</span> </vue-button-spinner> 
