CSS：位置加载指示器位于屏幕*

How can I position my loading indicator in the center of the screen. Currently I'm using a little placeholder and it seems to work fine. However, when I scroll down, the loading indicator stays right in that predefined position. How can I make it follow the scrolling so that it always sits on top??

如何将加载指示器放在屏幕*。目前我正在使用一个小占位符，它似乎工作正常。但是，当我向下滚动时，加载指示器保持在该预定位置。如何让它跟随滚动，以便始终位于顶部？

#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%;        
}

5 个解决方案

#1

use position:fixed instead of position:absolute

使用position：fixed而不是position：absolute

The first one is relative to your screen window. (not affected by scrolling)

第一个是相对于您的屏幕窗口。（不受滚动影响）

The second one is relative to the page. (affected by scrolling)

第二个是相对于页面。（受滚动影响）

Note : IE6 doesn't support position:fixed.

注意：IE6不支持position：fixed。

#2

.loader{
 position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/loaderred.gif') 50% 50% no-repeat rgb(249,249,249);
}

<div class="loader"></div>

#3

change the position absolute of div busy to fixed

将div busy的位置绝对值改为fixed

#4

This is what I've done for Angular 4:

这就是我为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>

#5

Worked for me in angular 4

在角4中为我工作

by adding style="margin:0 auto;"

通过添加style =“margin：0 auto;”

<mat-progress-spinner
  style="margin:0 auto;"
  *ngIf="isLoading"
  mode="indeterminate">
  </mat-progress-spinner>

#1