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

Overview

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

Comments
  • Maximum call stack size exceeded, bootstrap modal

    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)
    
    enhancement 
    opened by azambiez 16
  • Could not find a type declaration file 

    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';

    help wanted 
    opened by derweise 12
  • How to use it with vue router

    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.

    opened by NaturalDevCR 12
  • Vue3 - Use loader instance in store or router

    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

    opened by webmastervinay 9
  • [vue-3] useLoading is missing from exports

    [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();
    
    enhancement 
    opened by arrownorth 9
  • Blur (Backdrop-Filter) not working

    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.

    opened by danielDigitalArt 8
  • [Typescript] ERROR  Failed to compile - No overload matches this call

    [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

    help wanted 
    opened by erikhu 8
  • CreativeVNode Is not a function

    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)

    opened by Wawingi 7
  • defining

    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 : {});

    question 
    opened by wiforsyth 7
  • Types declaration file for typescript

    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?

    invalid 
    opened by AyushG3112 7
  • Set Loader Options when using as Plugin

    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'
        })
    
    question 
    opened by bluezald 6
  • useLoading is not consistent with other plugins

    useLoading is not consistent with other plugins

    Hello! First off, thanks a lot for this useful plugin :). Wanted to bring your attention to a behavior difference in your useLoading implementation vs. other plugins (such as vue-router's useRouter). Your useLoading methods creates a brand new instance, separate from what was globally installed, while other plugins simply call inject to get the global instance (example). That means if I want to use the global instance, with all the configuration options I set, I have to do this instead:

    const loading = inject("$loading") as PluginApi;
    

    I'd recommend changing it to just be a wrapper around inject, preventing duplicate instances and avoiding confusing situations such as what I ran into, where global configs strangely didn't have any effect.

    enhancement 
    opened by IGx89 1
  • Some kind of showDelay option would be nice

    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});
    
    enhancement 
    opened by sir-gawain 1
  • Control focus is lost on hide

    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.

    enhancement 
    opened by sunergeo 1
Releases(3.0.0)
Owner
Ankur Kumar
Open Source Fanatic | Tinkerer | Spotify Addict
Ankur Kumar
👇 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

William Lindvall 38 Nov 24, 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

zhoulin 87 Nov 19, 2022
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

Jeff 57 Apr 6, 2022
Vue-ac-loader is a plugin for show a full screen loader on requests.

AC Loader (vue-ac-loader) vue-ac-loader is a plugin for show a full screen loader on requests.

miSkoMV 0 Jan 21, 2020
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
SVG component to create placeholder loading, like Facebook cards loading.

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

EGOIST 2.9k Nov 28, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

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

Vũ Đức Việt 5 Oct 20, 2022
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Pygmy Slow Loris 162 Nov 6, 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

Naufal Rabbani 141 Oct 19, 2022
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.

Lucas Leandro 758 Nov 14, 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

TS Pro 38 Oct 21, 2022
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 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

Aleksei Iatsiuk 13 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

iCanJS 8 Apr 30, 2021
Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Heath Yang 14 Dec 17, 2020
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

Guillaume Chau 409 Nov 24, 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

Duoc Nguyen 642 Nov 16, 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

岛书 141 May 8, 2022