Using to block whlie client processed work. Please checkout Demo to see how does it look like.
For vue 2
npm i --save vuejs-loading-screen
or with vue 3
npm i --save vue3-loading-screen
Vue2:
import Vue from 'vue' import loading from 'vuejs-loading-screen' Vue.use(loading)
Vue3:
import {createApp} from 'vue' import App from './App.vue' import Loading from 'vue3-loading-screen' const app = createApp(App) app.use(Loading, /*{...}*/) app.mount('#app')
From now you can use $isLoading as globally function to trigger show/hide loading screen.
<template> <h1>Welcome to VueLoading Screen</h1> </template> <script> export default { methods: { sendHttpRequest () { this.$isLoading(true) // show loading screen this.$axios.post(url, params) .then(({data}) => { console.log(data) }) .finally(() => { this.$isLoading(false) // hide loading screen }) } }, mounted () { this.sendHttpRequest() } } </script>
If you want to modify such background, icon size, color, type, you just configure options such:
Vue.use(loading, { bg: '#41b883ad', icon: 'refresh', size: 3, icon_color: 'white', })
or you can style the loading by yourself (TailwindCss as example):
Vue.use(loading, { bg: '#41b883ad', slot: ` <div class="px-5 py-3 bg-gray-800 rounded"> <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> Loading...</h3> </div> ` })
Start from main.js file
import Vue from 'vue' import VueI18n from 'vue-i18n' import loading from 'vuejs-loading-screen' // your i18n setup Vue.use(VueI18n) const messages = { en: { message: { loading: 'Loading...' } }, km: { message: { loading: 'កំពុងដំណើរការ...' } } } const i18n = new VueI18n({ locale: 'en', // set locale messages, // set locale messages }) // config loading plugins Vue.use(loading, { bg: '#41b883ad', slot: ` <div class="px-5 py-3 bg-gray-800 rounded"> <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ i18n.t('message.loading') }</h3> </div> `, }) new Vue({ i18n, ... }).$mount('#app');
And then with App.vue file, we need to watch $i18n.locale and then call $changeIsLoadingOptions function to update plugin options.
watch: { '$i18n.locale' () { this.$changeIsLoadingOptions({slot: ` <div class="px-5 py-3 bg-gray-800 rounded"> <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ this.$t('message.loading') }</h3> </div> `}) } }
| Option | Value | Description |
|---|---|---|
| bg | default: '#41b883ad' |
: color string |
| icon | deault: 'fas fa-spinner' |
: support font-awesome |
| size | default: '3' |
: {1, 2, 3, 4, 5} string |
| icon_color | default: '#ffffff' |
: color string |
| slot | default: font-awesome |
: raw html |