Have ideas to improve npm?Join in the discussion! »

    vue-button-spinner

    2.2.1 • Public • Published

    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)]

     
    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>
     

    Keywords

    Install

    npm i vue-button-spinner

    DownloadsWeekly Downloads

    670

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar