Vue.js component for full screen loading indicator :cyclone:

Last update: Jun 26, 2022

Vue Loading Overlay Component

downloads jsdelivr npm-version github-tag build license ts

Vue.js component for full screen loading indicator

Demo or JSFiddle

Installation

# yarn
yarn add vue-loading-overlay

# npm
npm install vue-loading-overlay 

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 component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                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">
        <!-- your form inputs goes here-->
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button type="submit">Login</button>
    </form>
</template>

<script>
    import Vue from 'vue';
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    // Init plugin
    Vue.use(Loading);

    export default {
        data() {
            return {
                fullPage: false
            }
        },
        methods: {
            submit() {
                let loader = this.$loading.show({
                  // Optional parameters
                  container: this.fullPage ? null : this.$refs.formContainer,
                  canCancel: true,
                  onCancel: this.onCancel,
                });
                // simulate AJAX
                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 by default when true, use the .sync modifier to make it two-way binding
can-cancel Boolean false Allow user to cancel by pressing ESC or clicking outside
on-cancel Function ()=>{} Do something upon cancel, works in conjunction with can-cancel
is-full-page Boolean true When false; limit loader to its container^
transition String fade Transition name
color String #000 Customize the color of loading icon
height Number * Customize the height of loading icon
width Number * Customize the width of loading icon
loader String spinner Name of icon shape you want use as loader, spinner or dots or bars
background-color String #fff Customize the overlay background color
opacity Number 0.5 Customize the overlay background opacity
z-index Number 9999 Customize the overlay z-index
enforce-focus Boolean true Force focus on loader
lock-scroll Boolean false Freeze the scrolling during full screen loader
blur String 2px Value for the CSS blur backdrop-filter. Set to null or an empty string to disable blurring
  • ^When is-full-page is set to false, the container element should be positioned as position: relative. You can use CSS helper class vld-parent.
  • *The default height and width values may be varied based on the loader prop value

Available slots

The component accepts these slots:

  • default : Replace the animated icon with yours
  • before : Place anything before the animated icon, you may need to style this.
  • after : Place anything after the animated icon, you may need to style this.

API methods

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

let loader = Vue.$loading.show({
  // Pass props by their camelCased names
  container: this.$refs.loadingContainer,
  canCancel: true, // default false
  onCancel: this.yourCallbackMethod,
  color: '#000000',
  loader: 'spinner',
  width: 64,
  height: 64,
  backgroundColor: '#ffffff',
  opacity: 0.5,
  zIndex: 999,
},{
  // Pass slots by their names
  default: this.$createElement('your-custom-loader-component-name'),
});
// hide loader whenever you want
loader.hide();

Global configs

You can set props and slots for all future instances when using as plugin

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

Further you can override any prop or slot when creating new instances

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

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-loading.css" rel="stylesheet">
<!-- Init the plugin and component-->
<script>
Vue.use(VueLoading);
Vue.component('loading', VueLoading)
</script>

Browser support

  • Modern browsers only

Run examples on your localhost

  • Clone this repo
  • Make sure you have node-js >=12.14 and yarn >=1.x pre-installed
  • Install dependencies - yarn install
  • Run webpack dev server - yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser

Testing

  • This package is using Jest and vue-test-utils for testing.
  • Tests can be found in __test__ folder.
  • Execute tests with this command yarn test

License

MIT License

GitHub

https://github.com/ankurk91/vue-loading-overlay
Comments
  • 1. Maximum call stack size exceeded, bootstrap modal

    This error occurs when we show then hide the loading a few time or when another bootstrap modal or sweet alert is about to show alongside with the loading.

    The error log is:

    Uncaught RangeError: Maximum call stack size exceeded.
        at HTMLDocument.<anonymous> (modal.js:289)
        at HTMLDocument.dispatch (jquery.min.js:2)
        at HTMLDocument.y.handle (jquery.min.js:2)
        at Object.trigger (jquery.min.js:2)
        at Object.simulate (jquery.min.js:2)
        at HTMLDocument.n (jquery.min.js:2)
        at a.focusIn ([email protected]:1)
        at HTMLDocument.<anonymous> (modal.js:289)
        at HTMLDocument.dispatch (jquery.min.js:2)
        at HTMLDocument.y.handle (jquery.min.js:2)
    
    Reviewed by azambiez at 2019-01-04 03:06
  • 2. Could not find a type declaration file 

    Hello at the import:

    import Loading from 'vue-loading-overlay';

    I am getting:

    TS7016 Could not find a declaration file for module 'vue-loading-overlay'. '/Users/u2007750/cc/develop/projects/template/src/frontend/node_modules/vue-loading-overlay/dist/vue-loading.js' implicitly has an 'any' type.

    Try npm install @types/vue-loading-overlay if it exists or add a new declaration (.d.ts) file containing declare module 'vue-loading-overlay';

    Reviewed by derweise at 2020-05-07 11:21
  • 3. How to use it with vue router

    Hi, thanks a lot for this, i'm just wondering how can i use this alongside with vue router, i want to show the spinner on each load, thanks in advance.

    Reviewed by NaturalDevCR at 2018-10-27 18:04
  • 4. Vue3 - Use loader instance in store or router

    This is not a issue. Its question or feature request (if not available)

    Your documentation mentions that it can be used inside any component or via composition api. Glad it support both.

    I couldn't find a way where it can be used inside store or router. I tried following:

    but it broke the code and showing errors in console.

    • Vue.js version : 3.x
    • Browser name and version : Chrome 92
    • This package version : 4.x.x

    Current behavior

    import { useLoading} from 'vue-loading-overlay'
    const $loading = useLoading()
    

    image

    Reviewed by webmastervinay at 2021-09-02 09:16
  • 5. [vue-3] useLoading is missing from exports

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [X ] Feature request
    [ ] Other, please describe
    
    I am just looking for an example using the new <script setup> feature in Vue 3.x. I can't figure out how to make this work. I see the code for useLoading but it is returning undefined when I do:
    
    import { useLoading } from 'vue-loading-overlay';
    const { loading } = useLoading();
    
    Reviewed by arrownorth at 2021-08-23 20:42
  • 6. CreativeVNode Is not a function

    I have this error, but i did all good.

    app.js:53952 Uncaught TypeError: (0 , e.createVNode) is not a function at app.js:53952 at app.js:53952 at app.js:53952 at app.js:53952 at Object../node_modules/vue-loading-overlay/dist/vue-loading.min.js (app.js:53952) at webpack_require (app.js:20) at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/FechoDiario.vue?vue&type=script&lang=js& (app.js:3701) at webpack_require (app.js:20) at Module../resources/js/views/FechoDiario.vue?vue&type=script&lang=js& (app.js:72073) at webpack_require (app.js:20)

    Reviewed by Wawingi at 2021-06-08 14:52
  • 7. defining "after" slot in .show() method.

    I'm attempting to append a div with a text class to the loader icon using the "after" slot in the .show() method. I've attempted to use jquery to create the markup, but it seems that I can only append text. I've event tried to query and target the vid-icon class to append.

    Documentation is sparse when attempting to do this from the javascript side versus markup. Could someone assist?

    ... slotDefinition: { after: $('.vid-icon').append('<div class="loader-spinning-text">loading ...</div>') } ...

    loader = Vue.$loading.show(propertiesDefinition, args.slotDefinition ? args.slotDefinition : {});

    Reviewed by wiforsyth at 2021-05-03 14:51
  • 8. Types declaration file for typescript

    In my app, when I do

    import Loading from 'vue-loading-overlay';

    I get the error:

    Could not find a declaration file for module 'vue-loading-overlay'. '/home/ayush/Desktop/currycoins/head-vue/node_modules/vue-loading-overlay/dist/vue-loading.min.js' implicitly has an 'any' type.

    Try npm install @types/vue-loading-overlay if it exists or add a new declaration (.d.ts) file containing declare module 'vue-loading-overlay';

    I tried

    npm i --save @types/vue-loading-overlay but got the error:

    npm ERR! code E404 npm ERR! 404 Not Found: @types/[email protected]

    npm ERR! A complete log of this run can be found in: npm ERR! /home/ayush/.npm/_logs/2018-03-08T03_30_04_370Z-debug.log

    Any chance we can have a types declaration file?

    Reviewed by AyushG3112 at 2018-03-08 03:31
  • 9. Set Loader Options when using as Plugin

    Can we use the loader to set its global options when installing as plugin, like this:

    Vue.use(Loading, {
      container: null,
      isFullPage: true,
      loader: 'dots'
    })
    

    so that when I call it, I can do this

    this.$loading.show()
    

    instead of

    let loader = this.$loading.show({
          container: null,
          isFullPage: true,
          loader: 'dots'
        })
    
    Reviewed by bluezald at 2020-02-12 10:05
  • 10. vue-loading-orverlay internet explorer

    Hi folks, My application needs to execute under internet explorer but i when opening in internet explorer the vue-loading-overlay animation doesn't works , are there anything to solve the loading in internet explorer versions?

    Reviewed by renanbarbalho at 2019-03-26 14:51
  • 11. z-index default only set on full page overlay

    I noticed that when using the non full page version, the default z-index is 1. This confused me a little, but I was able to provide a higher number as a prop.

    This could be fixed by changing the CSS or adding a default value for the prop. I guess the correct fix would be to increase the default value in the CSS.

    If you're happy with that solution, I'm happy to submit a PR.

    Reviewed by Relequestual at 2019-12-20 09:02
  • 12. Blur (Backdrop-Filter) not working

    I'm submitting a ... (check one with "x")

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • Vue.js version : 3.2.31
    • Browser name and version : Chrome(100.0.4896.88)|Edge (100.0.1185.44)|Firefox (FF does not support backdrop-filter yet)
    • This package version : 5.0.3

    Current behavior The Blur Option does not work (does not blur anything)

    Expected behavior Content behind the background should be blured

    Minimal reproduction of the problem with instructions Using default settings will already show that the background does not get blured, also additional options do not blur anything. The problem lies in the css setting of "opacity: 0.5" this does make the background div transparent but backdrop-filter does not work with the opacity value. A fix is to use "background: rgba(255,255,255,0.5) instead of "background: #FFF; opacity: 0.5". Then the blur does worl correctly. Currently i added an addistional sass file which does these settings here:

    .vld-parent{
        .vld-background{
            background: rgba(136,136,136,0.5) !important;
            opacity: 1 !important;
        }
    }
    

    So i get a grey background which is transparent with the blur working as it should.

    Also maybe it would be wise to have different options for the opacity, where one is for the icon and one for the background.

    Reviewed by danielDigitalArt at 2022-04-20 09:37
  • 13. [Typescript] ERROR Failed to compile - No overload matches this call

    Tell about your platform

    • Vue.js version : 2.x with typescript
    • Browser name and version : Chrome|Firefox|Edge x.x.x
    • This package version : 3.x.x

    Hi how are you everybody? i have somekind of issue when run the command vue-cli-service build --mode production with this lib, the thing is the next:

     vue-cli-service build --mode production
    
    
    -  Building for production...
    Starting type checking service...
    Using 1 worker with 2048MB memory limit
    Browserslist: caniuse-lite is outdated. Please run:
    npx [email protected] --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx [email protected] --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     ERROR  Failed to compile with 1 error2:16:10 PM
    
     error  in /srv/src/atomics/loaders/Spinner.vue
    
    ERROR in /srv/src/atomics/loaders/Spinner.vue(17,2):
    17:2 No overload matches this call.
      Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
        Type 'typeof LoadingPlugin' is not assignable to type 'VueConstructor<Vue> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<any, any, any, any> | FunctionalComponentOptions<...> | ComponentOptions<...>'.
          Type 'typeof LoadingPlugin' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 10 more.
      Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
        Argument of type '{ components: { Loading: typeof Loading; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
          Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
        15 | import Loading from 'vue-loading-overlay';
        16 | 
      > 17 | @Component({
           |  ^
        18 |     components: {
        19 |         Loading,
        20 |     },
    

    i am using the guide as component, what can i do in this situation? regards

    Reviewed by erikhu at 2021-08-26 22:05
  • 14. Some kind of showDelay option would be nice

    I have something like this in my code:

    watch: {
                loading: function (loading) {
                    if (loading) {
                        this.loader = this.$loading.show();
                    } else {
                        this.loader.hide();
                        this.loader = null;
                    }
                }
    },
    

    and then on an ajax call i do something like this:

    methods: {
                async loadProjekte() {
                    this.loading = true;
                    this.projekte = await Projekt.get(); // call to server by ajax
                    this.loading = false;
                },
    },
    

    This works very well, but on short ajax calls, the overlay pops up and hides only microseconds later. It would be very nice to have an option to show() or a global option, that delays the display for some time for me:

    this.$loading.show({showDelay: 500});
    
    Reviewed by sir-gawain at 2020-08-25 13:08
  • 15. Control focus is lost on hide

    I am using this control as a full-page cover to show activity during my ajax calls. However, once the call is completed, the focus is lost - it's set to document, rather than the last control that had the focus.

    Reviewed by sunergeo at 2019-11-07 14:20
👇 Vue button with slideout loading indicator
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

Jun 29, 2022
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

May 11, 2022
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Apr 6, 2022
SVG component to create placeholder loading, like Facebook cards loading.
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

Jun 25, 2022
Vue-loading - Vue Placeholder loading Content With Image,Table,Status
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Jan 30, 2022
Full overlay loading with spinner for Vue
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Jun 29, 2022
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Nov 28, 2021
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Jun 10, 2022
Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

Jun 24, 2022
An vuejs loading component ☄️
An vuejs loading component ☄️

An vuejs loading component ☄️

Apr 8, 2022
Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

Jun 9, 2022
A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

Apr 30, 2021
Progress bars and loading indicators for Vue.js
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

Jun 29, 2022
Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner Just another collection of loading spinners with Vue.js Installation npm install --save vue-loading-spinner or yarn add vue-loadin

Jun 19, 2022
Vue directive for show loading block in any element.

vue-loading Vue directive for show loading block in any element. Live demo and usage Build by vue-cli and vue-cli-component Usage General usage <scrip

May 8, 2022
A plugin to handle the loading state within your Vue applications

A plugin to handle the loading state within your Vue applications

Nov 7, 2018
🌀 A collection of loading indicators animated with CSS for VueJS
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Jan 21, 2022
💫 A collection of loading spinner components for Vuejs

Vue Spinners A Vue.js port of react-spinners. ?? Installation npm install --save @saeris/vue-spinners # or yarn add @saeris/vue-spinners ?? Usage Ther

Jun 13, 2022
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Jun 30, 2022