Angularjs - loading bar hide page overlay

Question

Helo I used this loadingbar. I need the page to overlay when sending requests. But div for overlay is still visible after loading is ended. Here is my code:

    angular.module('app', ["angular-loading-bar"])
    .config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
        cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
    }])
#loading-bar-container {
    pointer-events: all;
    z-index: 99999;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: wait;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
}

I need hide #loading-bar-container after loading is over. do you have any ideas how to do it? Thank you

this lib is so small that it's much easier for you to put breakpoint into "response" interceptor code there to check why setComplete() is not called. wild guess: you may have some background requests sent by some 3rd party component. wild guess #2: I'm not sure if loadingbar correctly behaves once request has been canceled(if cancelling does not trigged response interceptors - loadingbar will not disappear) — skyboyer
– skyboyer, Commented Mar 4, 2018 at 8:41
@G_S and why not? :) it's easy way to visualize some networking activity is running in background. — skyboyer
– skyboyer, Commented Mar 4, 2018 at 8:43
Thank you for your comments. If you think that problem is in loading bar component, which another component you would recommend me? — bluray
– bluray, Commented Mar 4, 2018 at 8:47

skyboyer · Accepted Answer · 2018-03-04 16:13:56Z

initially I misunderstood the question. So it's about hiding/showing container used for loading bar. Not about hiding/showing angular-loading-bar itself. So it could be done next way:

someModule.directive('loadingBarContainer', function ($rootScope) { 
    return { 
        restrict: 'A', 
        link: bindVisibilityToEvents 
    }; 

    function linkVisibilityToEvents($scope, $element) { 
        $rootScope.$on('cfpLoadingBar:loading', function () { 
            $element.show(); 
        });  
        $rootScope.$on('completed', function () { 
            $element.hide(); 
        }); 
    } 
})

And somewhere in your template:

<div id="loading-bar-container" loading-bar-container />

Also I believe it's more convenient to create different directive named say 'backdrop' and hide/show this element styled with

backdrop {
    pointer-events: none;
    cursor: wait; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

So blocking UI and visualizing HTTP activity would be less coupled.

Collectives™ on Stack Overflow

Angularjs - loading bar hide page overlay

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related