如何在所有内容的中心显示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>

但是它会闪烁并显示滚动条：

有什么想法吗？

- Onestone

---

你能创建一个 Plunker 来演示吗？我不知道闪烁的问题，但你可以使用 CSS overflow-y: hidden 来消除滚动条。 - Fissio

Answer 1

你可能已经找到解决方案了，但如果还没有，这就是原因：旋转的圆圈是一个SVG元素，然后被转换成如下图所示的旋转效果。

图片链接：https://istack.dev59.com/vnq65.webp 这种转换使得内部内容的高度比旋转器本身的大小略高，因此你可以看到滚动条。

在具有“layout =“row””属性的div中添加高度（在你的情况下应该是70px，但该值取决于旋转器的大小；增加额外的高度也不会损害你隐藏的“md-dialog”背景）应该可以解决问题。

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

希望这能有所帮助。

- Tom

---

最后居然是这么简单的解决方案 :-) - Gajotres

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>

这段代码对我很有效。可以根据你的代码进行调整。

- Divije Narasimhachar