Vue.js component for full screen loading indicator.
npm install vue-loading-overlay
!TypeScript
Vue.js component for full screen loading indicator
| Vue.js version | Package version | Branch |
| :--- |:---------------:|-----------------------------------------------------------------:|
| 2.x | 3.x | 3.x |
| 3.x | 6.x | main |
``bash`
npm install vue-loading-overlay@^6.0
#### As component
`html
:on-cancel="onCancel"
:is-full-page="fullPage"/>
`
Initialise the plugin in your app
`js`
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
`html
class="vl-parent"
ref="formContainer">
`
#### or same with Composition API
`html`
The component accepts these props:
| Attribute | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| active | Boolean | false | Show loading by default when true, use it as v-model:active |false
| can-cancel | Boolean | | Allow user to cancel by pressing ESC or clicking outside |()=>{}
| on-cancel | Function | | Do something upon cancel, works in conjunction with can-cancel |true
| is-full-page | Boolean | | When false; limit loader to its container^ |fade
| transition | String | | Transition name |#000
| color | String | | Customize the color of loading icon |spinner
| height | Number | * | Customize the height of loading icon |
| width | Number | * | Customize the width of loading icon |
| loader | String | | Name of icon shape you want use as loader, spinner or dots or bars |#fff
| background-color | String | | Customize the overlay background color |0.5
| opacity | Number | | Customize the overlay background opacity |9999
| z-index | Number | | Customize the overlay z-index |true
| enforce-focus | Boolean | | Force focus on loader |false
| lock-scroll | Boolean | | 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 canvl-parent
use CSS helper class .height
The default and width values may vary based on the loader prop value
The component accepts these slots:
* default - Replace the animated icon with yoursbefore
* - 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.
`js
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();
`
You can set props and slots for all future instances when using as plugin
`js`
app.use(LoadingPlugin, {
// props
color: 'red'
}, {
// slots
})
Further you can override any prop or slot when creating new instances
`js`
let loader = this.$loading.show({
color: 'blue'
}, {
// override slots
});
`html`
* Clone this repo
* Make sure you have node-js >=20.11 and pnpm >=8.x pre-installedpnpm install
* Install dependencies
* Run webpack dev server
* This should open the demo page in your default web browser
* This package is using Jest
and vue-test-utils for testing.
* Execute tests with this command npm test`
MIT License