Slow loading of AngularJS app in IE - add progress bar

Question

UPDATE1: Started using ngProgress, but not giving required effect in IE.
Final Update: Best solution found. See last answer below.

---

The AngularJS application ha

Answer 1

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