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]

 
<button-spinner
    :is-loading="isLoading" 
    :disabled="isLoading"
    :status="status">
    <span>Submit</span>
</button-spinner>