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

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...'        }    } }