web-dev-qa-db-fra.com

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

Comment puis-je positionner mon indicateur de charge au centre de l'écran? Actuellement, j'utilise un petit espace réservé et cela semble bien fonctionner. Cependant, lorsque je fais défiler l'écran vers le bas, l'indicateur de chargement reste dans cette position prédéfinie. Comment puis-je le faire suivre le défilement pour qu'il soit toujours au-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%;        
}
csspositioncenter
22
Frank Vilea

utilisez position:fixed au lieu de position:absolute

Le premier est relatif à votre fenêtre d'écran. (non affecté par le défilement)

Le second est relatif à la page. (affecté par le défilement)

Remarque : IE6 ne supporte pas la position: fixed.

36
Kraz

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

16
L Ananta Prasad

C'est ce que j'ai fait pour 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>
2
Salim

changer la position absolue de div busy en fixe

2
Anish Joseph

A travaillé pour moi dans angular 4 

en ajoutant style="margin:0 auto;"

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

Vous pouvez utiliser OnLoad ou lors de la récupération d'informations à partir de la base de données.

En HTML Ajoutez le code suivant:

<div id="divLoading">
<p id="loading">
    <img src="~/images/spinner.gif">
</p>

En CSS, ajoutez le code suivant:

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

si vous voulez montrer et cacher de JS:

  document.getElementById('divLoading').style.display = 'none'; //Not Visible
  document.getElementById('divLoading').style.display = 'block';//Visible
0
Praveen Gopal