Skip to content

PygmySlowLoris/vue-full-loading

Repository files navigation

Vue Full Loading

Full overlay with spinner for Vue.

Perfect for performing a task in the background avoiding any other action on the screen. Can be easily handled by your central event bus

Live Demo

Installation

npm install vue-full-loading --save

Properties

Properties Type Values
label String Default 'Loading...'
show Boolean Default false
Options: true or false.
overlay Boolean Default true
Options: true or false.
overlay-class String Default 'white-overlay'
loader-class String Default 'loader-wrapper'
event-bus Object Default null
Central event Bus
event-show String Default 'show-full-loading'
event-hide String Default 'hide-full-loading'

Slots

Want to add your own loading content/style? No problem, you can use the available slots to do so.

Available slots:

  • loading-container - This is the container for the loading text/spinner
  • loading-text - Only for the loading text
  • loading-spinner - Only for the spinner

Examples

Include the component in your .vue file.

<template>
 <loading
     :show="show"
     :label="label">
 </loading>
</template>

You also can manage this component by your eventBus with custom event names.

<template>
 <loading
     :event-bus="myEventBus"
     event-show="show-my-full-loading"
     event-hide="hide-my-full-loading"
     :label="label">
 </loading>
</template>

Notice that if no event names passed it will use the default ones.

Match your data with your components props.

import loading from 'vue-full-loading'

export default {
  components: {
    loading
  },
   data(){
       return {
           show: false,
           label: 'Loading...'
       }
   }
}