显示角度加载栏并禁用页面的所有内容，直到页面加载

Question

我有很多ASP.NET页面和服务器数据库连接。当需要从服务器到客户端时，他们需要一些时间才能完全加载。现在我想显示一个角加载栏，直到页面加载..它工作正常。但我想在加载页面时禁用页面。请看这个链接我用于
anulgar-loading-bar example link
请帮助我。
在此先感谢。

Answer 1

我不确定我是否理解你的问题100％。你不能只覆盖一个div（可能是灰色 - 显示它是禁用的），并显示加载栏/ gif？

叠加一个div将是相当简单的，你可以找到很多资源，比如， How to overlay one div over another div overlay a div over another one with css

Answer 2

其实我写了一个block ui module for angular回了几天，做这一招。它应该与那个漂亮的加载栏一起工作。

Answer 3

我是angular-loading-bar的巨大粉丝。

默认没有叠加，但是你可以很容易地用这个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。

Answer 4

这是我的解决方案，基于@andrew上面的解决方案并使用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 - 在开始的时候：

$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 - 到底：

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