Vue JS loading overlay component

Vue overlay loading component demo.

Install

# npm 
npm install vue-loading-overlay --save
  
# Yarn 
yarn add vue-loading-overlay
<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="asyncRequest">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: {
            asyncRequest() {
                this.isLoading = true;
                // simulate async request
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('Loader cancelled by user.')
            }
        }
    }
</script>

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

Leave a Reply

Close Menu