Vue Loading Overlay Component

Vue.js component for full screen loading indicator

Demo or JSFiddle

Version matrix

| Vue.js version | Package version | Branch | | :--- |:---------------:|-----------------------------------------------------------------:| | 2.x | 3.x | 3.x | | 3.x | 6.x | main |

Installation

npm install vue-loading-overlay@^6.0

Usage

As component

<template>
    <div class="vl-parent">
        <loading v-model:active="isLoading"
                 :can-cancel="true"
                 :on-cancel="onCancel"
                 :is-full-page="fullPage"/>
<label><input type="checkbox" v-model="fullPage">Full page?</label>         <button @click.prevent="doAjax">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 @submit.prevent="submit"
          class="vl-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>

or same with Composition API

Available props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | active | Boolean | false | Show loading by default when true, use it as v-model:active | | 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 | | enforce-focus | Boolean | true | Force focus on loader | | lock-scroll | Boolean | false | Freeze the scrolling during full screen loader |

^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)

<!-- Vue js -->
<!-- Lastly add this package -->
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@6/dist/css/index.css" rel="stylesheet"> <!-- Init the plugin and component-->