Vue Loading Overlay Component

Vue.js component for full screen loading indicator

Demo or JSFiddle

Version matrix

Installation

npm install vue-loading-overlay@^6.0 

Usage

As component

<template>
    <div class="vl-parent">
        

        <label><input type="checkbox">Full page?</label>
        <button>fetch Data</button>
    </div>
</template>

As plugin

Initialise the plugin in your app

import {createApp} from 'vue';
import {LoadingPlugin} from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';
// Your app initialization logic goes here
const app = createApp({});
app.use(LoadingPlugin);
app.mount('#app');

Then use the plugin in your components

<template>
    <form class="vl-parent">
        
        <label><input type="checkbox">Full page?</label>
        <button type="submit">Login</button>
    </form>
</template>

or same with Composition API

Available props

The component accepts these props:

• ^When is-full-page is set to false, the container element should be positioned as position: relative. You can use CSS helper class vl-parent.
• *The default height and width values may 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 the animated icon, you may need to style this.
• after - Place anything after the animated icon, you may need to style this.

API methods

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

import {h} from 'vue';

let loader = this.$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: h('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

app.use(LoadingPlugin, {
    // props
    color: 'red'
}, {
    // slots
})

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

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

Use directly in browser (with CDN)

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=20.11 and pnpm >=8.x pre-installed
• Install dependencies pnpm install
• Run webpack dev server npm start
• This should open the demo page in your default web browser

Testing

• This package is using Jest and vue-test-utils for testing.
• Execute tests with this command npm test

License

MIT License