Simple VUE 2 component to create a button spinner. The perfect solution for your submit buttons!
- 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)
npm install vue-button-spinner
[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>