Vue Custom Loading

Custom full overlay loading with spinner for Vue. Select light or dark overlay and insert your spinner.

<template>
    <Loading :show="show"></Loading>
</template>
<script>    
    import Loading from 'vue-custom-loading';
    
    export default {
      components: {
        Loading
      },
       data(){
           return {
               show: false,
           }
       }
    }
</script>
<style scoped>

</style>

Install

NPM

npm install vue-custom-loading --save

YARN

yarn add vue-custom-loading

Webpack

Command	Options
dev	webpack-dev-server --env development
build	static build

Examples

vue-custom-loading example

Settings

Option	Type	Default	Description
show	Boolean	false	Show or hide loader
overlay	String	'light'	Color of overlay: 'light', 'dark' or 'none'

Custom spinner

Example of custom loader (spinner).

<template>
    <Loading 
        :show="show"
        :overlay="overlay"
    >
    <div slot="loader">
        <div class="special-loader-style">Loading ...</div>
    <div>
    </Loading>
</template>
<script>    
    import Loading from 'vue-custom-loading';
    
    export default {
      components: {
        Loading
      },
       data(){
           return {
               show: false,
               overlay: 'dark',
           }
       }
    }
</script>
<style scoped>
    .special-loader-style {
        color: #fff;
    }
</style>

You can add your own loader (spinner) in slot 'loader'. Although you can add loader's styles in tag style.

Contact me

• Site: ikloster03.github.io
• E-mail: ikloster@yandex.ru
• Telegram channel: t.me/ikloster95

CHANGELOG

LICENSE

Copyright (c) 2017 Monastyrev Ivan ikloster@yandex.ru. Licensed under the MIT license.