twitter-bootstrap 显示 angular-loading-bar 并禁用页面的所有内容，直到页面加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21012705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show angular-loading-bar And disable all contents of the page until page loads
提问by Seetha
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 until page loads.. It is working fine. But i want to disable the page at the time loading page. Please see this link which i used for
anulgar-loading-bar example link
Please help me.
Thanks in advance.
我有很多 ASP.NET 页面和服务器数据库连接。当从服务器到客户端请求时，它们需要一些时间才能完全加载。现在我想在页面加载之前显示一个角度加载条。它工作正常。但我想在加载页面时禁用该页面。请参阅我用于
anulgar-loading-bar 示例链接的链接
请帮助我。
提前致谢。
回答by Andrew
I am a huge fan of angular-loading-bar.
我是angular-loading-bar 的忠实粉丝。
No overlay by default, but you can easily tweak the loading-bar with this bit of CSS;
默认情况下没有叠加层，但是您可以使用这一点 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);
}
回答by null
I actually wrote a block ui module for angulara few days back that does this trick. It should work hand in hand with that nice looking loading bar.
回答by Tharaka
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?
我不确定我是否 100% 理解你的问题。您不能只覆盖一个 div（可能是灰色的 - 以显示它已禁用），并显示加载条/gif 吗？
Overlaying a div would be quite simple and you can find many resources like, How to overlay one div over another divoverlay a div over another one with css
覆盖一个 div 将非常简单，您可以找到许多资源，例如， 如何将一个 div 覆盖在另一个 div 上用 css 将一个 div覆盖在另一个 div 上
回答by tarekahf
Here is my solution based on solution by @andrew above and using ngProgress Bar component.
这是我基于上面@andrew 的解决方案并使用ngProgress Bar 组件的解决方案。
CSS:
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:
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 - in the end:
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);
