Using to block whlie client processed work. Please checkout Demo to see how does it look like.
npm i --save vuejs-loading-screen
import Vue from 'vue'
import loading from 'vuejs-loading-screen'
Vue.use(loading)<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>
`
})| 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 |