Vue 2.7 Loading Overlay Component

Vue.js 2.6 / 2.7 component for full screen (or container) loading indicator.

Fork of vue-loading-overlay (MIT, Ankur Kumar). This package keeps the same programmatic API (el + $slots in api.js) and fixes Vue 2.7 rendering issues in Component.vue only (hasDefaultSlot + explicit spinner / dots / bars instead of relying on the default slot fallback for built-in loaders).

Maintainer: 서지훈 (JI HUN SEO) — GitHub · [email protected] · attribution in NOTICE.

Installation

npm install vue2.7-loading-overlay

Peer dependency: Vue ^2.6.14 || ^2.7.0.
Styles are loaded when you import the package entry (no separate dist/*.css file).

Usage

As component

<template>
  <div class="vld-parent">
    <loading :active.sync="isLoading"
             :can-cancel="true"
             :on-cancel="onCancel"
             :is-full-page="fullPage"></loading>

    <label><input type="checkbox" v-model="fullPage">Full page?</label>
    <button @click.prevent="doAjax">fetch Data</button>
  </div>
</template>

<script>
  import Loading from 'vue2.7-loading-overlay';

  export default {
    data() {
      return {
        isLoading: false,
        fullPage: true
      }
    },
    components: {
      Loading
    },
    methods: {
      doAjax() {
        this.isLoading = true;
        setTimeout(() => {
          this.isLoading = false
        }, 5000)
      },
      onCancel() {
        console.log('User cancelled the loader.')
      }
    }
  }
</script>

As plugin

<template>
  <form @submit.prevent="submit" class="vld-parent" ref="formContainer">
    <label><input type="checkbox" v-model="fullPage">Full page?</label>
    <button type="submit">Login</button>
  </form>
</template>

<script>
  import Vue from 'vue';
  import Loading from 'vue2.7-loading-overlay';

  Vue.use(Loading);

  export default {
    data() {
      return {
        fullPage: false
      }
    },
    methods: {
      submit() {
        let loader = this.$loading.show({
          container: this.fullPage ? null : this.$refs.formContainer,
          canCancel: true,
          onCancel: this.onCancel,
        });
        setTimeout(() => {
          loader.hide()
        }, 5000)
      },
      onCancel() {
        console.log('User cancelled the loader.')
      }
    }
  }
</script>

Available props

The component accepts these props:

| Attribute | Type | Default | Description | |:-----------------|:--------:|:---------:|:----------------------------------------------------------------------------------------------| | active | Boolean | false | Show loading when true; use .sync for two-way binding | | can-cancel | Boolean | false | Allow cancel via ESC or outside click | | on-cancel | Function | ()=>{} | Callback on cancel (with can-cancel) | | is-full-page | Boolean | true | When false, limit loader to its container^ | | transition | String | fade | Transition name | | color | String | #000 | Loading icon color | | height | Number | * | Loading icon height | | width | Number | * | Loading icon width | | loader | String | spinner | spinner, dots, or bars | | background-color | String | — | Overlay background color | | opacity | Number | — | Overlay background opacity | | z-index | Number | — | Overlay z-index | | programmatic | Boolean | false | Set by API when using $loading.show | | container | Object / Function / HTMLElement | — | DOM container (programmatic) |

* ^When is-full-page is false, the container should be position: relative (helper class vld-parent).
* *Default height / width depend on the loader prop (see loader components).

This fork’s Component.vue does not expose enforce-focus, lock-scroll, or blur as props (upstream README listed them; they are not in this build).

Available slots

• default — Replace the animated icon with your own content (passed programmatically via Vue.$loading.show second argument when needed).
• before — Content before the animated icon.
• after — Content after the animated icon.

API methods

Vue.$loading.show(?propsData, ?slots)

let loader = Vue.$loading.show({
  container: this.$refs.loadingContainer,
  canCancel: true,
  onCancel: this.yourCallbackMethod,
  color: '#000000',
  loader: 'spinner',
  width: 64,
  height: 64,
  backgroundColor: '#ffffff',
  opacity: 0.5,
  zIndex: 999,
}, {
  default: this.$createElement('your-custom-loader-component-name'),
});
loader.hide();

Also available as this.$loading.show(...) after Vue.use(Loading).

Global configs

Default props and slots for all instances:

Vue.use(Loading, {
  color: 'red'
}, {
  // slots
})

Override per instance:

let loader = Vue.$loading.show({
  color: 'blue'
}, {
  // slots
});

Non-module / CDN

This package publishes source (src with .vue files). Use a bundler (webpack, Vue CLI, Vite + Vue 2 plugin) that compiles node_modules. A pre-built browser <script> bundle like the upstream dist CDN example is not included here.

Changelog

See GitHub Releases (or commit history) for changes.

License

MIT — original copyright Ankur Kumar; fork maintenance noted in NOTICE.