ankurk91 / vue-loading-overlay Goto Github PK

I'm trying to add some text above the spinner using the before slot. The text is showing but the spinner has disappeared!

<loading :active="loading"
                 :can-cancel="false"
                 :is-full-page="true"
                 color="#ffd04b">
            <before>Loading...</before>
        </loading>

Hi, let me start off by saying great work.
Anyways, I am new to Vuejs and currently I an using vue with Laravel (Yes I know this has nothing to do with Laravel). My question is, how can I make this be called globally so that I don't have to import this into every single component. Currently in app.js I have

//Import Vue Loading Overlay
import Loader from 'vue-loading-overlay';

// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.min.css';

Vue.use(Vuex, Loader);

const app = new Vue({
    el: '#app',
    router,
    store,
    Loader,
});

and in my checkout.vue, I have...

postToServer: function () {

           let loader = this.$loading.show({
               container: this.fullPage ? null : this.$refs.paymentForm
           });

           this.$http.post('api/validateData?cartId=' + localStorage.getItem('cartId'), this.form)

               .then(results => {

                   window.location.href = '/thankyou?cartId=' + localStorage.getItem('cartId');
                   loader.hide();

               })

               .catch(results => {

                   this.errors = [];

                    if (results.status === 422) {

                        this.errors = results.body.errors;
                        loader.hide();
                    }

                    window.scrollTo(0,0);
               });
       },

but I keep getting the following error.

app.js:59499 Uncaught (in promise) TypeError: Cannot read property 'show' of undefined
at VueComponent.postToServer (app.js:59499)
at app.js:59540

so I was wondering if anyone can shed some light in the matter.

Thanks.

do you have or intend to add support to custom loaders instead of the 3 predefined?

I have one on my own, and I want to use it instead of dots, spinners and things like that.

This is the error that I am receiving on my latest pull of version 3.2.0 with NuxtJS.

Take note that 1 week ago it is working fine but 5 hours earlier where my automated build npm install a new one vue-loading-overlay package this occurred.

Hi, i'm using this library but I have a problem with container property.
I assigned the container prop to a div that is the same of my el vue instance property (I want to view the top menu always) and didn't work.
I followed your examples and I also change the ref div but didn't work.

Vue.use(Loading, {
  isFullPage: false,
})

I init plugin like that, but it works as fullscreen until I specify :is-full-page="false".

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 (vue-loading-overlay@3:1)
    at HTMLDocument.<anonymous> (modal.js:289)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

link to GitHub page from this Fiddle https://jsfiddle.net/ankurk91/w8y8k5wo/ is broken

When the loading spinner is active, I can still scroll down the page. How do I prevent this?

First off, thanks for putting this together and especially for the great documentation. Do you have any suggestions on how to use this from within a Bootstrap 4 modal? I'm finding that it dims and presents the spinner underneath the modal. Thanks.

could you please make a full example without webpack?

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

Hi. I'm building a SPA. I made some tests with your component some weeks ago, but had to switch to another one because, strangely, I was not able to set it full page, the navbar would still appear no matter what.

Long story short, I gave up on that design and ended up not using that other component either. However, now I have another demand in which your component with that particular behavior would be perfect, but it's gone. Now that I'm testing your component again, it is hiding everything on my page, including the navbar.

Do you know how can I get that behavior again, in which the navbar is not hidden?

Thanks for your time and your awesome component.

While developing and serving the files, the loader works as intended as shown below

The problem comes up when you build the application for production. The CSS for the module refuses to load or build correctly as shown below.

I've need to use Axios and your plugin, but if I add the start of vue-loading-overlay when I have a request with Axios, I muse have the variable of loader...

Could you separate the instance of $loading ?

With this, I can use this.$loading.show() when I want display the loader overlay.
And I can use this.$loading.hide() when the request is executed.

Thanks.

Would you be interested in adding TypeScript definitions to the project? I've actually got them mostly written for a project I'm working on that uses this plugin so I could provide a merge request to implement them if that's cool.

P.S. Thanks for providing an awesome plugin.

Hello,

I tried to follow issue #38 to include vue-loading in vuex: store but didn't work:

import axios from "axios";
import Vue from "vue";


export default {
    namespaced: true,

   actions: {
           fetchData({commit}, payload) {
            commit('CLEAR_DIST_COMMODITY_PRICE_DATA');

            Vue.$loading.show({});

            axios
                .get(`/api/trends/commodities/districts/${payload.id}/${JSON.stringify(payload.dates)}`)
                .then((response) => {
                    commit('SET_DIST_COMMODITY_PRICE_DATA', response.data);

                    Vue.$loading.hide();
                })
                .catch(error => console.error(error));
        }
     }

and in my app.js file :

import Vue from "vue";
import store from "./store/store";
import Loading from 'vue-loading-overlay';

Vue.use(Loading, {
    height: 128,
    width: 128
});

.
.
.

and the style imported into app.scss:

@import "~vue-loading-overlay/dist/vue-loading.css";

I am using laravel-mix in laravel project.

Please advice,

Hello,

Thanks for the package.

I want to how can I fix the loader position, as I'm using the loader on two tables, The loader position varies by number content in a table, How I can assure that the spinner always be on top. Just like when there is no content in table.

Looking forward to your reply on this.

Thanks

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?

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/vue-loading-overlay@latest

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?

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

Is it possible to display the loading screen when the route changes?
What I want is, if someone switch to other route the loading screen will appear. Currently the loading screen only appears when the page has been rendered so that the application appears unresponsive when the internet connection is slow
I found it using router.beforeEach() but I don't know how to implement this package because I usually set the isLoading property in data()

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.

Hi,
Adding vue-loading in store wont work.
When i add it inside component, al works.

My bootstrap file:

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);
Vue.use(VueNoty);
Vue.use(Vuex);

Here is the current code- inside store/index.js

    actions: {
        setAds({ commit }, category) {
            let loader = this.$loading.show({
                // Optional parameters
                loader: 'dots',
                height: 255,
                width: 255,
                color: '#7DC242'
            });
            axios.get('/ads', { params: { category: category } }).then(data => {
                let ads = data.data.data;
                commit('ads', ads);
                loader.hide()
            });
        },

Here is the error photo:

I noticed there were no notes for this release, but browsing your commits for that release, I see you updated the babelrc file and it seems like you marked IE as a dead browser, which effectively makes code stop working in IE11. Is that intended? If yes, it should be noted in the release notes as a breaking change.

ea205e0

I want to show this loader inside a div element but it always goes full screen. I do not what's the problem or its a bug.

I placed vld-parent class on the div and a ref. Then I am using this code initiate, but it goes full screen.

let loader = this.$loading.show({
    container: this.$refs.loadContainer,
    loader: this.loader,
}, {});

setTimeout(() => {
    loader.hide()
},5000)

I am using it as a plugin.

Please Help me I am stuck.

Hello. @ankurk91
First of all, thank you for making and sharing this component. Thanks to this, I've been able to increase productivity.

I have one suggestion about z-index.
Currently, I am adjusting the z-index value of overlay through the external style sheet for z-index issue, which would be nice if I could get it through the props and use it.
If you agree to this, I'll make a pull request.
I'll be waiting for the reply. Thank you.

Vue.$loading.hide() is not working...

To hide we are using hide(), but for show() what should i do?

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

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.

Hello, i cant make it work, im adding it as a global component from my app.js like this:

// Import component
import {Loading} from 'vue-loading-overlay';
Vue.component('loading',
    Loading
);
// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.min.css';

then i add on my .vue file this:

<loading :active.sync="isSaving" :can-cancel="true"></loading>

but when i change the variable value i dont see the loading on screen

and i tried as a plugin but i get an error on install it says install on undefined

it was working on development but i had to change the import like this:

// Import component
import {LoadingPlugin} from 'vue-loading-overlay/src/index';
// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.min.css';
// Init plugin
Vue.use(LoadingPlugin);

but that code wasnt able to compile con production environment of vue

can you please help me as i really want to use this amazing component.

thanks

i want to use the overlay globally and to change the default icon. i've seen in the source code that there is a slot for the icon but HOW can i inject my custom markup when i use it as a plugin?

Not working on IE11. it is giving syntax error in utils.js

My Code

onUploadProgress: function( progressEvent ) {
                  let loader = this.$loading.show({
                        container: this.fullPage ? null : this.$refs.formContainer
                    });
                     this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) );
                     if(this.uploadPercentage == 100){
                       loader.hide()
                     }
             }.bind(this)

not work in vue.2.5 i use method plugin

Is there any way to define the loading color by props? I would like to have several loading on same page with different color? Thanks

Hi
I am getting the error when i try to change the loader if i remove :loader = "dots" it works well.
[Vue warn]: Property or method "dots" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

<template>
    <div>
        <div class="vld-parent">
            <loading
                :active.sync="isLoading"
                :can-cancel="false"
                :loader = "dots"
                :color = "'#facf5a'"
                :background-color = "'#2BA589'"
                :opacity="0.5"
                :is-full-page="fullPage">
            </loading>
        </div>
</template>

<script>
    import Loading from 'vue-loading-overlay';
    import 'vue-loading-overlay/dist/vue-loading.css';


    export default {
        name: "AttendanceComponent",
        data() {
            return {
                isLoading: true,
                fullPage: true,
                attendances: {},
                map_url: 'http://maps.google.com/?q=',
                userList: [],
                dateList: [],
                userId: '',
                fromDate: '',
                toDate: '',
                infoWinOpen: true,
                currentMidx: null,
                infoOptions: {
                    pixelOffset: {
                        width: 0,
                        height: -5
                    }
                },
            }
        },
        mounted() {
           
        },
        components: {
            Loading
        },
        methods: {
            
        }

    }
</script>

Is it possible to support text on the overlay?
like "Content is loading" on top of a spinner?
Thanks!

I am using the plugin mode of the component.

How does it work if I show two or more loading spins at the same time? Does it know how to deal with more than one calls to $loading.show() and $loading.hide() ?

Hello, Ankur!

It's not a issue, just a question. Could you help me?

Is there an easy way to show your component everytime an ajax request is started and hide it everytime an ajax request is completed?

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.

Nice!

May I know how to change the spinner?

Thanks.

Hello,
As mentioned in readme edge 18 should be supported.
But SVG "animatetransform" is not supported yet by Edge.
Any suggestions?
Thank you

It would be great if you can capture the tab key so the user cannot go to some inputs or links with the tab key while the loading is enabled

Vue.use( 
    Loading,
   {
    // props
   }
  // {
  //   // slots
  //   default: this.$createElement("loading-img")
  // }
);

As we know, we can't use this.$createElement method in Vue.use(), How can we config default slot globally? thank you!

First off, thanks for this great component! When using the before or after slots, the loader is left aligned with the text. How can it be re-centered on screen? Here is an example JSFiddle that shows the issue.

Hey, use this if you want a full width container and fixed center loader:

.vld-overlay .vld-icon, .vld-parent {
    position: fixed !important;
    top: 45vh !important;
}

.vld-overlay .vld-background {
    position: fixed !important;
}

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "width". Expected Number with value NaN, got String with value "200".

found in

--->
at src/views/Post.vue
at src/App.vue