1.0.0 • Published 6 years ago

vue-custom-loading v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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

CommandOptions
devwebpack-dev-server --env development
buildstatic build

Examples

Alt Text

vue-custom-loading example

Settings

OptionTypeDefaultDescription
showBooleanfalseShow or hide loader
overlayString'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

CHANGELOG

LICENSE

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