Wanatchapong / vue-loading

Using to block while client requesting.

Vuejs Loading Screen (Demo)

Using to block whlie client processed work.

Screenshot

Installation

npm i --save vuejs-loading-screen

Usage

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: {
            fetchData () {
                this.$isLoading(true) // show loading screen
                this.$axios.post(url).then((response) => {
                        this.$isLoading(false) // hide loading screen
                        console.log(response)
                    })
            }
        },
        mounted () {
            this.fetchData()
        }
    }
</script>

Customization

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',
})

Configurations

Option	Value	Description
bg	default: '#41b883ad'	: color string
icon	deault: '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