如何以所有内容为中心显示md-progress-circular

Question

我希望在从服务器加载数据时使用md-progress-bar。

显示md-progress-bar时，我希望所有其他内容都不可点击。此外，进度动画应显示在窗口的中心。

我尝试在模板中使用以下HTML：

<md-dialog style="background-color:transparent;box-shadow:none">
    <div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">
    <md-progress-circular md-mode="indeterminate" ></md-progress-circular>
    </div>
</md-dialog>

但它闪烁并显示滚动条：

有什么想法吗？

Answer 1

您可能现在已经找到了解决方案，但如果没有，这就是原因：旋转圆是SVG元素，然后转换（用于旋转效果），就像在此图像上一样。

该转换使内部内容高度比旋转器本身的大小更高，因此您可以看到滚动条。

添加高度（在你的情况下70px应该没问题，但是这个值取决于微调器的大小;添加额外的高度会在你隐藏md-dialog背景时不会造成伤害）使用layout="row"的div应该修复它。

<md-dialog style="background-color:transparent;box-shadow:none">
    <div layout="row" layout-sm="column" layout-align="center center" aria-label="wait" 
         style="height:70px;">
    <md-progress-circular md-mode="indeterminate" ></md-progress-circular>
    </div>
</md-dialog>

我希望这会有所帮助。

Answer 2

<div data-ng-app='demo' ng-controller='demoController'>
    <md-tabs md-stretch-tabs="always" md-dynamic-height md-border-bottom>
       <!––some code here-->
    </md-tabs>  
    <div layout="row" layout-sm="column" layout-align="space-around" style="position: absolute;bottom:1%;height:2000px;width:100%">
       <md-progress-circular md-mode="indeterminate" md-diameter="100" style="position:fixed;bottom:50%" ></md-progress-circular>
    </div>
</div>

这段代码对我有用。可以适应您的代码。