Vue loading overlay

https://github.com/ankurk91/vue-loading-overlay

by Ankur Kumar

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css">
<main id="app">
    <h1>Vue 2 Loading Overlay demo</h1>

    <loading :active.sync="visible" :can-cancel="true"></loading>

    <button @click.prevent="open()">Programmatic show</button>
    <button @click.prevent="show()">Component show, cancellable</button>
    <hr>
    <a target="_blank" href="https://ankurk91.github.io/vue-loading-overlay/">Visit more demos</a>
</main>

CSS

body {
    font-family: Arial, Verdana, sans-sarif;
    background: lightblue
}

JavaScript

Vue.use(VueLoading);

let app = new Vue({
    el: '#app',
    data() {
        return {
            visible: false
        }
    },
    components: {
        Loading: VueLoading
    },
    methods: {
        open() {
            console.log('open was clicked, will auto hide');
            let loader = this.$loading.show({
                loader: 'dots'
            });
            setTimeout(() => loader.hide(), 3 * 1000)
        },
        show() {
            console.log('show was clicked, click to hide');
            // do AJAX here
            this.visible = true
        }
    }
});