Vuejs Loading Screen

Using to block whlie client processed work. Please checkout Demo to see how does it look like.

!Screenshot

Installation

For vue 2

``
npm i --save vuejs-loading-screen
`

or with vue 3

`
npm i --save vue3-loading-screen
`

Usage

Vue2:

`js
import Vue from 'vue'
import loading from 'vuejs-loading-screen'

Vue.use(loading)
`

Vue3:

`js
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.

`vue



`

Customization

If you want to modify such background, icon size, color, type, you just configure options such:

`js
Vue.use(loading, {
bg: '#41b883ad',
icon: 'refresh',
size: 3,
icon_color: 'white',
})
`

or you can style the loading by yourself (TailwindCss as example):

`js
Vue.use(loading, {
bg: '#41b883ad',
slot:


})
`

Translate your custom text

Start from main.js file

`js
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:

,
})

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.

`js
watch: {
'$i18n.locale' () {
this.$changeIsLoadingOptions({slot:

})
}
}
`

Configurations

| 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 |