vue-loading-overlay

Vue Loading Overlay Component

Vue.js v2.x component for full screen loading indicator

Demo on JSFiddle

Installation

:mega: Now published to npm

# npm
npm install vue-loading-overlay --save

# Yarn
yarn add vue-loading-overlay

Usage

As component

<template>
    <div>
        <loading :active.sync="isLoading" :can-cancel="true" :on-cancel="whenCancelled"></loading>
        <button @click.prevent="fetchData">fetch Data</button>
    </div>
</template>

<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.min.css';

    export default {
        data() {
            return {
                isLoading: false,
            }
        },
        components: {
            Loading
        },
        methods: {
            fetchData() {
                this.isLoading = true;
                // AJAX example with axios
                axios.post('/api').then((response)=>{
                  this.isLoading = false                
                })
            },
            whenCancelled() {
              console.log("User cancelled the loader.")
            }
        }
    }
</script>

As plugin

<template>
    <form @submit.prevent="submit">
        <!-- form inputs -->
    </form>
</template>

<script>
    import Vue from 'vue';
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.min.css';
    // Init plugin
    Vue.use(Loading);

    export default {
        methods: {
            submit() {
                let loader = this.$loading.show();
                axios.post('/api').then((response)=>{
                  loader.hide()
                })                 
            }
        }
    }
</script>

Available props

The component accepts these props:

Attribute	Type	Default	Description
canCancel	Boolean	false	Allow user to cancel
onCancel	Function	()=>{}	Do something upon cancel

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/vue-loading-overlay@2"></script>
<link href="https://unpkg.com/vue-loading-overlay@latest/dist/vue-loading.min.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
Vue.use(VueLoading)
</script>

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=6.10 and yarn >=1.x pre-installed
• Install dependencies - yarn install
• Run webpack dev server - yarn start
• This should open the demo page at http://localhost:9000 in your default web browser

Browser support

• I have not taken care of old browsers.
• You can apply autoprefixer on css to support older browsers.

Credits

• Buefy loading component

License

MIT License

Changelog

2.0.4

• Chore: dist now includes non-minified js file as well