Vuejs loading component is well written and comes with really good demo.
Installation
# npm npm install vue-loading-overlay --save # Yarn yarn add vue-loading-overlay
Usage as component
<template> <div class="vld-parent"> <loading :active.sync="isLoading" :can-cancel="true" :on-cancel="onCancel" :is-full-page="fullPage"></loading> <label><input type="checkbox" v-model="fullPage">Full page?</label> <button @click.prevent="doAjax">fetch Data</button> </div> </template> <script> // Import component import Loading from 'vue-loading-overlay'; // Import stylesheet import 'vue-loading-overlay/dist/vue-loading.css'; export default { data() { return { isLoading: false, fullPage: true } }, components: { Loading }, methods: { doAjax() { this.isLoading = true; // simulate AJAX setTimeout(() => { this.isLoading = false },5000) }, onCancel() { console.log('User cancelled the loader.') } } } </script>
Usage as plugin
<template> <form @submit.prevent="submit" class="vld-parent" ref="formContainer"> <!-- your form inputs goes here--> <label><input type="checkbox" v-model="fullPage">Full page?</label> <button type="submit">Login</button> </form> </template> <script> import Vue from 'vue'; // Import component import Loading from 'vue-loading-overlay'; // Import stylesheet import 'vue-loading-overlay/dist/vue-loading.css'; // Init plugin Vue.use(Loading); export default { data() { return { fullPage: false } }, methods: { submit() { let loader = this.$loading.show({ // Optional parameters container: this.fullPage ? null : this.$refs.formContainer, canCancel: true, onCancel: this.onCancel, }); // simulate AJAX setTimeout(() => { loader.hide() },5000) }, onCancel() { console.log('User cancelled the loader.') } } } </script>
Find detail documentation at following link