Skip to content
Full overlay loading with spinner for Vue
Branch: master
Clone or download
Latest commit 210ed0b Jul 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Gif path changed May 29, 2017
dist New version released (1.2.1) Apr 29, 2018
docs First Commit May 22, 2017
src Fix spinner not showing: Apr 27, 2018
.babelrc First Commit May 22, 2017
.gitignore First Commit May 22, 2017
.npmignore First Commit May 22, 2017
LICENSE.txt First Commit May 22, 2017
README.md fix syntax highlighting Jul 1, 2018
demo.gif Gif path changed May 29, 2017
index.html First Commit May 22, 2017
package-lock.json New version (1.0.4) released Thanks #4 Feb 13, 2018
package.json New version released (1.2.1) Apr 29, 2018
webpack.config.js First Commit May 22, 2017

README.md

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...'
       }
   }
}
You can’t perform that action at this time.