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 |
npm install vue-loading-overlay@^6.0 <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>
<script>
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';
export default {
data() {
return {
isLoading: false,
fullPage: true
}
},
components: {
Loading
},
methods: {
doAjax() {
this.isLoading = true;
// simulate AJAX
setTimeout(() => {
this.isLoading = false
}, 5000)
},
onCancel() {
console.log('User cancelled the loader.')
}
}
}
</script>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>
<script>
export default {
data() {
return {
fullPage: false
}
},
methods: {
submit() {
let loader = this.$loading.show({
// Optional parameters
container: this.fullPage ? null : this.$refs.formContainer,
canCancel: true,
onCancel: this.onCancel,
});
// simulate AJAX
setTimeout(() => {
loader.hide()
}, 5000)
},
onCancel() {
console.log('User cancelled the loader.')
}
}
}
</script><script setup>
import {ref, inject} from 'vue'
import {useLoading} from 'vue-loading-overlay'
const $loading = useLoading({
// options
});
// or use inject without importing useLoading
// const $loading = inject('$loading')
const fullPage = ref(false)
const submit = () => {
const loader = $loading.show({
// Optional parameters
});
// simulate AJAX
setTimeout(() => {
loader.hide()
}, 5000)
}
</script>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-pageis set tofalse, the container element should be positioned asposition: relative. You can use CSS helper classvl-parent. - *The default
heightandwidthvalues may vary based on theloaderprop 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.
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
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
});<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@6"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@6/dist/css/index.css" rel="stylesheet">
<!-- Init the plugin and component-->
<script>
const app = Vue.createApp({});
app.use(VueLoading.LoadingPlugin);
app.component('loading', VueLoading.Component)
app.mount('#app')
</script>- Clone this repo
- Make sure you have node-js
>=20.11and pnpm>=8.xpre-installed - Install dependencies
pnpm install - Run webpack dev server
npm start - 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent