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 |