Vue.js component for full screen loading indicator, compatible for vue3.
npm install vue3-loading-overlaybash
yarn
yarn add vue3-loading-overlay // not valiable now.
npm
npm install vue3-loading-overlay
`
Usage
#### As component
`html
:can-cancel="true"
:on-cancel="onCancel"
:is-full-page="fullPage">
`
$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