Vue Loading Overlay Component

!ts

Vue.js component for full screen loading indicator

Demo

Installation

``bash

yarn

yarn add vue3-loading-overlay // not valiable now.

npm

npm install vue3-loading-overlay

`

Usage

#### As component
`html



`

$3

`html



`

Available props

The component accepts these props:

| Attribute | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| active | Boolean | false | Show loading by default when true |
| 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 |
| blur | String | 2px | Value for the CSS blur backdrop-filter. Set to null or an empty string to disable blurring |

* ^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 varied 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
let loader = useLoading();
loader.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, not work now.
default: this.$createElement('your-custom-loader-component-name'),
});
// hide loader whenever you want
loader.hide();
`

Global configs

todo

You can set props and slots for all future instances when using as plugin
`js
Vue.use(Loading, {
// props
color: 'red'
},{
// slots
})
`
Further you can override any prop or slot when creating new instances
`js
let loader = Vue.$loading.show({
color: 'blue'
},{
// slots
});
`

$3

* Modern browsers only

Run examples on your localhost

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

* Todo.

License

MIT License