https://github.com/helmab/vue-loading
Loading screen for Vue app
https://github.com/helmab/vue-loading
loading vue vue-loading vue-loading-screen vue-plugins vuejs
Last synced: about 1 year ago
JSON representation
Loading screen for Vue app
- Host: GitHub
- URL: https://github.com/helmab/vue-loading
- Owner: HELMAB
- Created: 2019-04-03T12:54:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T18:05:46.000Z (over 1 year ago)
- Last Synced: 2025-06-25T19:42:13.203Z (about 1 year ago)
- Topics: loading, vue, vue-loading, vue-loading-screen, vue-plugins, vuejs
- Language: JavaScript
- Homepage: https://helmab.github.io/vue-loading/
- Size: 3.08 MB
- Stars: 21
- Watchers: 1
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vuejs Loading Screen
Using to block whlie client processed work. Please checkout [Demo](https://helmab.github.io/vue-loading/) to see how does it look like.
## 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
Welcome to VueLoading Screen
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()
}
}
```
## 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: `
Loading...
`
})
```
## 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: `
${ i18n.t('message.loading') }
`,
})
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: `
${ this.$t('message.loading') }
`})
}
}
```
## Configurations
| Option | Value | Description |
| ------------- | -------------| -----|
| bg | `default: '#41b883ad'` | : color string |
| icon | `deault: 'fas fa-spinner'` | : support [font-awesome](https://www.npmjs.com/package/@fortawesome/fontawesome-free) |
| size | `default: '3'` | : {1, 2, 3, 4, 5} string |
| icon_color | `default: '#ffffff'` | : color string |
| slot | `default: font-awesome` | : raw html |