wanxe / vue-button-spinner

Simple VUE 2 component to create a button spinner. The perfect solution for your submit buttons!

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>