Vuejs-Vue loading overlay 3.0.0: vue-loading-overlay - Tiny full screen loading indicator

Vue Loading Overlay Component

downloads jsdelivr npm-version github-tag build license

Vue.js component for full screen loading indicator

Demo or JSFiddle

Installation

# yarn
yarn add vue-loading-overlay

# npm
npm install 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>

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>

Available props

The component accepts these props:

Attribute Type Default Description
active Boolean false Show loading by default when true, use the .sync modifier to make it two-way binding
can-cancel Boolean false Allow user to cancel by pressing ESC or clicking outside
on-cancel Function ()=>{} Do something upon cancel, works in conjunction with can-cancel
is-full-page Boolean true When false; limit loader to its container^
transition String fade Transition name
color String #000 Customize the color of loading icon
height Number * Customize the height of loading icon
width Number * Customize the width of loading icon
loader String spinner Name of icon shape you want use as loader, spinner or dots or bars
background-color String #fff Customize the overlay background color
opacity Number 0.5 Customize the overlay background opacity
z-index Number 9999 Customize the overlay z-index
  • ^When is-full-page is set to false, the container element should be positioned as position: relative. You can use CSS helper class vld-parent.
  • *The default height and width values may be vary based on the loader prop value

Available slots

The component accepts these slots:

  • default : Replace the animated icon with yours
  • before : Place anything before animated icon, you may need to style this.
  • after : Place anything after animated icon, you may need to style this.

API methods

Vue.$loading.show(?propsData,?slots)

let loader = Vue.$loading.show({
  // Pass props by their camelCased names
  container: this.$refs.loadingContainer,
  canCancel: true, // default false
  onCancel: this.yourCallbackMethod,
  color: '#000000',
  loader: 'spinner',
  width: 64,
  height: 64,
  backgroundColor: '#ffffff',
  opacity: 0.5,
  zIndex: 999,
},{
  // Pass slots by their names
  default: this.$createElement('your-custom-loader-component-name'),
});
// hide loader whenever you want
loader.hide();

Global configs

You can set props and slots for all future instances when using as plugin

Vue.use(Loading, {
  // props
  color: 'red'
},{
  // slots
})

Further you can override any prop or slot when creating new instances

let loader = Vue.$loading.show({
 color: 'blue'
},{
  // slots
});

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-loading.css" rel="stylesheet">
<!-- Init the plugin and component-->
<script>
Vue.use(VueLoading);
Vue.component('loading', VueLoading)
</script>

Browser support

Run examples on your localhost

  • Clone this repo
  • Make sure you have node-js >=10.13 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

Testing

  • This package is using Jest and vue-test-utils for testing.
  • Tests can be found in __test__ folder.
  • Execute tests with this command yarn test

License

MIT License

Comments

  • Control focus is lost on hide
    Control focus is lost on hide

    Nov 7, 2019

    I am using this control as a full-page cover to show activity during my ajax calls. However, once the call is completed, the focus is lost - it's set to document, rather than the last control that had the focus.

    enhancement 
    Reply
  • Some kind of showDelay option would be nice
    Some kind of showDelay option would be nice

    Aug 25, 2020

    I have something like this in my code:

    watch: {
                loading: function (loading) {
                    if (loading) {
                        this.loader = this.$loading.show();
                    } else {
                        this.loader.hide();
                        this.loader = null;
                    }
                }
    },
    

    and then on an ajax call i do something like this:

    methods: {
                async loadProjekte() {
                    this.loading = true;
                    this.projekte = await Projekt.get(); // call to server by ajax
                    this.loading = false;
                },
    },
    

    This works very well, but on short ajax calls, the overlay pops up and hides only microseconds later. It would be very nice to have an option to show() or a global option, that delays the display for some time for me:

    this.$loading.show({showDelay: 500});
    
    enhancement 
    Reply
  • [Vue-3] Cannot read property 'contains' of null at Proxy.focusIn
    [Vue-3] Cannot read property 'contains' of null at Proxy.focusIn

    Jun 21, 2021

    I've got multiple Cannot read property 'contains' of null at Proxy.focusIn errors at this line regarding this.$refs.root.

    • [x] Bug report

    Tell about your platform

    • Vue.js version : 3.0.11
    • Browser name and version : Chrome 91.0.4472.106 (Dev), Firefox 89.0.1
    • This package version : 4.0.2

    Current behavior Cannot read property 'contains' of null at Proxy.focusIn errors in browser developer console.

    Expected behavior No errors regarding nullish elements in browser developer console.

    Minimal reproduction of the problem with instructions I have vue-cli project and was getting this error only after building it and serving it at some domain.

    I might have got this problem because of possibly wrong component usage such as following:

      <div v-show="loading" class="loading-container">
        <div>
          <Loading
            active
            loader="dots"
            :is-full-page="false"
          />
        </div>
      </div>
    

    I thought I did not need v-model, cause custom component appearance was controlled by loading prop and Loading component was always active. After adding additional ref variable drived by loading prop, error is gone:

      <div v-show="active" class="loading-container">
        <div>
          <Loading
            v-model:active="active"
            loader="dots"
            :is-full-page="false"
          />
        </div>
      </div>
      
    
      
      setup(props) {
        const { loading } = toRefs(props);
    
        const active = ref<boolean>(loading.value);
    
        watch(loading, (value) => {
          active.value = value;
        });
    
        return {
          active,
        };
      },
    

    Aftewards, I just wanted to know if v-model is required (even if only UI is needed in some cases) and propose to add some check to this.$refs.root.

    Reply
  • [Typescript] ERROR  Failed to compile - No overload matches this call
    [Typescript] ERROR Failed to compile - No overload matches this call

    Aug 26, 2021

    Tell about your platform

    • Vue.js version : 2.x with typescript
    • Browser name and version : Chrome|Firefox|Edge x.x.x
    • This package version : 3.x.x

    Hi how are you everybody? i have somekind of issue when run the command vue-cli-service build --mode production with this lib, the thing is the next:

     vue-cli-service build --mode production
    
    
    -  Building for production...
    Starting type checking service...
    Using 1 worker with 2048MB memory limit
    Browserslist: caniuse-lite is outdated. Please run:
    npx [email protected] --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx [email protected] --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     ERROR  Failed to compile with 1 error2:16:10 PM
    
     error  in /srv/src/atomics/loaders/Spinner.vue
    
    ERROR in /srv/src/atomics/loaders/Spinner.vue(17,2):
    17:2 No overload matches this call.
      Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
        Type 'typeof LoadingPlugin' is not assignable to type 'VueConstructor<Vue> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<any, any, any, any> | FunctionalComponentOptions<...> | ComponentOptions<...>'.
          Type 'typeof LoadingPlugin' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 10 more.
      Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
        Argument of type '{ components: { Loading: typeof Loading; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
          Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
        15 | import Loading from 'vue-loading-overlay';
        16 | 
      > 17 | @Component({
           |  ^
        18 |     components: {
        19 |         Loading,
        20 |     },
    

    i am using the guide as component, what can i do in this situation? regards

    help wanted 
    Reply
  • Vue3 - Use loader instance in store or router
    Vue3 - Use loader instance in store or router

    Sep 2, 2021

    This is not a issue. Its question or feature request (if not available)

    Your documentation mentions that it can be used inside any component or via composition api. Glad it support both.

    I couldn't find a way where it can be used inside store or router. I tried following:

    but it broke the code and showing errors in console.

    • Vue.js version : 3.x
    • Browser name and version : Chrome 92
    • This package version : 4.x.x

    Current behavior

    import { useLoading} from 'vue-loading-overlay'
    const $loading = useLoading()
    

    image

    Reply
  • [vue-3] useLoading is missing from exports
    [vue-3] useLoading is missing from exports

    Aug 23, 2021

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [X ] Feature request
    [ ] Other, please describe
    
    I am just looking for an example using the new <script setup> feature in Vue 3.x. I can't figure out how to make this work. I see the code for useLoading but it is returning undefined when I do:
    
    import { useLoading } from 'vue-loading-overlay';
    const { loading } = useLoading();
    
    enhancement 
    Reply
  • Vue 3 support?
    Vue 3 support?

    Oct 19, 2020

    Hi, can you add a support for VUE 3? Thank you in advance.

    enhancement 
    Reply
  • Could not find a type declaration file 
    Could not find a type declaration file 

    May 7, 2020

    Hello at the import:

    import Loading from 'vue-loading-overlay';

    I am getting:

    TS7016 Could not find a declaration file for module 'vue-loading-overlay'. '/Users/u2007750/cc/develop/projects/template/src/frontend/node_modules/vue-loading-overlay/dist/vue-loading.js' implicitly has an 'any' type.

    Try npm install @types/vue-loading-overlay if it exists or add a new declaration (.d.ts) file containing declare module 'vue-loading-overlay';

    help wanted 
    Reply
  • How to use it with vue router
    How to use it with vue router

    Oct 27, 2018

    Hi, thanks a lot for this, i'm just wondering how can i use this alongside with vue router, i want to show the spinner on each load, thanks in advance.

    Reply
  • Maximum call stack size exceeded, bootstrap modal
    Maximum call stack size exceeded, bootstrap modal

    Jan 4, 2019

    This error occurs when we show then hide the loading a few time or when another bootstrap modal or sweet alert is about to show alongside with the loading.

    The error log is:

    Uncaught RangeError: Maximum call stack size exceeded.
        at HTMLDocument.<anonymous> (modal.js:289)
        at HTMLDocument.dispatch (jquery.min.js:2)
        at HTMLDocument.y.handle (jquery.min.js:2)
        at Object.trigger (jquery.min.js:2)
        at Object.simulate (jquery.min.js:2)
        at HTMLDocument.n (jquery.min.js:2)
        at a.focusIn ([email protected]:1)
        at HTMLDocument.<anonymous> (modal.js:289)
        at HTMLDocument.dispatch (jquery.min.js:2)
        at HTMLDocument.y.handle (jquery.min.js:2)
    
    enhancement 
    Reply