CSS: indicateur de chargement de position au centre de l'écran

Comment puis-je placer mon indicateur de chargement dans le centre de l'écran. Actuellement, je suis en utilisant un peu d'espace réservé et il semble bien fonctionner. Cependant, quand je scroll vers le bas, l'indicateur de chargement reste dans cette position prédéfinie. Comment puis-je faire suivre le défilement de sorte qu'il est toujours assis sur le dessus??

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

source d'informationauteur Frank Vilea

  1. 26

    utilisation position:fixed au lieu de position:absolute

    La première est relative à votre écran de la fenêtre. (pas affectée par défilement)

    Le second est relatif à la page. (touchés par défilement)

    Note : IE6 ne supporte pas la position:fixed.

  2. 2

    modifier la position absolue de la div occupé fixe

  3. 1

    C'est ce que j'ai fait pour Angulaires 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>
  4. 0

    A travaillé pour moi dans angulaire 4

    en ajoutant style="margin:0 auto;"

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