如何将加载指示器放在屏幕中央。目前我正在使用一个小占位符，它似乎工作正常。但是，当我向下滚动时，加载指示器保持在该预定位置。如何让它跟随滚动，以便始终位于顶部？
#busy
{
position: absolute;
left: 50%;
top: 35%;
display: none;
background: transparent url("../images/loading-big.gif");
z-index: 1000;
height: 31px;
width: 31px;
}
#busy-holder
{
background: transparent;
width: 100%;
height: 100%;
}
使用position:fixed而不是position:absolute
第一个是相对于您的屏幕窗口。 （不受滚动影响）
第二个是相对于页面。 （受滚动影响）
注意：IE6不支持position：fixed。
.loader{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif')
50% 50% no-repeat rgb(249,249,249);
}<div class="loader"></div>这就是我为Angular 4所做的：
<style type="text/css">
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
</style>
</head>
<body>
<app-root>
<div class="centered">
<h1>Loading...</h1>
</div>
</app-root>
</body>
将div busy的位置绝对值改为fixed
为角色4工作
通过添加style="margin:0 auto;"
<mat-progress-spinner
style="margin:0 auto;"
*ngIf="isLoading"
mode="indeterminate">
</mat-progress-spinner>
您可以使用此OnLoad或从DB获取信息
在HTML中添加以下代码：
<div id="divLoading">
<p id="loading">
<img src="~/images/spinner.gif">
</p>
在CSS中添加以下代码：
#divLoading {
margin: 0px;
display: none;
padding: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
z-index: 30001;
opacity: 0.8;}
#loading {
position: absolute;
color: White;
top: 50%;
left: 45%;}
如果你想显示和隐藏JS：
document.getElementById('divLoading').style.display = 'none'; //Not Visible
document.getElementById('divLoading').style.display = 'block';//Visible