Vue Loading Overlay Component

Vue.js component for full screen loading indicator
Original author ankurk91

Demo

$3

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

Installation

``bash
npm install @rascoder/vue-loading
`

Usage

#### As component

`html




`

$3

Initialise the plugin in your app

`js
import {createApp} from 'vue';
import {LoadingPlugin} from '@rascoder/vue-loading';
import '@rascoder/vue-loading/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




`

#### or same with Composition API

`html

`

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 | RotateSquare | Name of icon shape you want use as loader, ["RotateSquare", "CubeShadow", "Grid","Stretch","Circle","LetterCube"] yada, more see demo|
| 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

$3

`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();
`

Global configs

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
});
`

Run examples on your localhost

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