Show angular-loading-bar And disable all contents of the page until page loads

Question

I have lots of ASP.NET Pages and server database connection.They takes some time to load fully when requested from server to client. Now I want to show a angular-loading-bar

Answer 1

I actually wrote a block ui module for angular a few days back that does this trick. It should work hand in hand with that nice looking loading bar.

Answer 2

Here is my solution based on solution by @andrew above and using ngProgress Bar component.

CSS:

#ngProgress-container.block-editing {
    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.33);
    margin-top:10px;
    #ngProgress {
        margin-top:-9px;
        width:5px; /* Force display progress as early as possible */
        opacity:1; /* Force display progress as early as possible */
    }
}

JS - in the beginning:

$scope.progressbar = ngProgressFactory.createInstance();
//To force display of progress bar as early as possible
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
$scope.progressbar.set(1);
$scope.progressbar.getDomElement().addClass('block-editing');
$scope.stopProgressbar = $timeout(function(){
    $scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
},10);
$timeout(function(){
    $scope.progressbar.start();
},100);

JS - in the end:

//Stop progress bar
$interval.cancel($scope.stopProgressbar);
$timeout(function(){
    //JIRA: NE-2984 - un-block editing when page loading is done
    $($scope.progressbar.getDomElement()).fadeOut(2000, function() {
        $($scope.progressbar.getDomElement()).removeClass('block-editing');
    });
    $scope.progressbar.complete();
}, 3000);

Answer 3

I am not sure if I understand your question 100%. Can't you just overlay a div (may be gray - to show it's disable), and display the loading bar/gif?

Overlaying a div would be quite simple and you can find many resources like, How to overlay one div over another div overlay a div over another one with css

Answer 4

I am a huge fan of angular-loading-bar.

No overlay by default, but you can easily tweak the loading-bar with this bit of CSS;

#loading-bar {
  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);
}

Here is a demo.