Question

我有很多ASP.NET页面和服务器数据库连接。当从服务器到客户端请求时，它需要一些时间来完全加载。现在我想显示一个角度加载条直到页面加载..它工作正常。但我想在加载页面时禁用该页面。请看我用过的链接
anulgar-loading-bar example link
请帮帮我。
提前致谢。

Answer 1

我是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 2

几天前我实际上写了block ui module for angular来做这个伎俩。它应该与漂亮的装载栏一起携手。

Answer 3

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

覆盖div非常简单，你可以找到很多资源，比如 How to overlay one div over another div overlay a div over another one with css

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

显示angular-load-bar并禁用页面的所有内容，直到页面加载为止

4 个答案: