Can we disable & shade out the application background... Something like jquery's block UI plugin

[nchidgopkar1]

Can we disable & shade out the application background... Something like jquery's block UI plugin

[urish]

Not supported at the moment. Feel free to add and send a pull request...

[jonagoldman]

This might help:

    function loaderDirective() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                key: '@'
            },
            link: function (scope, element, attributes) {

                scope.$on('us-spinner:spin', function (event, key) {
                    if (key === scope.key) {
                        element.addClass('loading');
                    }
                });

                scope.$on('us-spinner:stop', function (event, key) {
                    if (key === scope.key) {
                        element.removeClass('loading');
                    }
                });

            },
            template: '<div class="us-spinner-wrapper"><div us-spinner spinner-key="{{key}}"></div></div>'
        };
    }

.us-spinner-wrapper {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;
    background: none;
    transition: background 0.1s ease;
    pointer-events: none;
}

.us-spinner-wrapper.loading {
    pointer-events: auto;
        background: rgba(255, 255, 255, 0.6);
}

and you use it like this:

<loader key="my-spinner"></loader>

[kishankanugula]

👍 @jonagoldman

[jonagoldman]

@kishankanugula I updated my previous comment with the correct css class (was in scss previously)

[FrancisTiong]

@jonagoldman can you explain further how to apply ur changes or provide a plunker to demo? im not really understand how to apply that function.. thanks in advance..

[manojjkurup]

yes!! Please @jonagoldman i also need a plunker or breif!!!

[gustavogsimas]

If anyone else need something, I Got mine working by adding this css class according to issue #49

.spinner:before {
background-color: rgba(49, 37, 37, 0.2);
border-radius: 6px;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
content: " ";
}

[jonagoldman]

@FrancisTiong @manojjkurup I created a directive called 'loader'. It just wraps the original spinner with an overlay div and passes the 'key' scope attribute to the spinner. It also listens to the events broadcasted by the spinner. When the spinner is activated, an event is fired from the spinner and I activate the overlay by adding the css class. When the spinner is deactivated I just remove the class. That's it. You can see the listeners in the 'link' function and the div wrapping is done in the 'template'. Hope it helps.

[jonagoldman]

... and you use the loader directive <loader key="my-spinner"></loader> instead of the original spinner. I you don't want the overlay you can use the regular spinner directive.

[antonpegov]

Can you pls show in plunker how is it looks like when running.

[ghost]

@antonpegov http://jquery.malsup.com/block/#page
Click on Default message button and try to click on buttons, it prevents your interaction while loading.., and free the UI when get finished

[Jaaichandran]

@twizzzlers : Good job !