Vuejs Loading Screen for Vue3
Using to block whlie client processed work. Please checkout Demo to see how does it look like.
Installation
npm i --save vue3-loading-screen
Usage
import { createApp } from 'vue'
import App from './App.vue'
import loading from 'vue3-loading-screen'
const app = create(App).use(loading, /*{...options}*/).mount('#app')
Option API
<template>
<h1>Hello, Vue Developer!</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>
Option API
<template>
<h1>Hello, Vue Developer!</h1>
</template>
<script setup>
import {inject} from "vue"
const changeStatus = inject('changeStatus')
const changeIsLoadingOptions = inject('changeIsLoadingOptions')
const sendHttpRequest = () => {
// use `changeStatus(true)` to show loading
// use `changeStatus(false)` to hide loading
}
</script>
Customization
If you want to modify such background, icon size, color, type, you just configure options such:
app.use(loading, {
bg: '#41b883ad',
icon: 'refresh',
size: 3,
icon_color: 'white',
})
or you can style the loading by yourself (TailwindCss as example):
app.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>
`
})
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 |