CSS: Indicador de carga de posición en el centro de la pantalla

¿Cómo puedo colocar mi indicador de carga en el centro de la pantalla? Actualmente estoy usando un pequeño marcador de posición y parece funcionar bien. Sin embargo, cuando me desplazo hacia abajo, el indicador de carga permanece en esa posición predefinida. ¿Cómo puedo hacer que siga el desplazamiento para que siempre se sienta en la parte superior?CSS: Indicador de carga de posición en el centro de la pantalla

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

Fuente

2011-06-06 Frank Vilea

No estoy seguro de su problema. Tal vez posición: arreglado. El HTML ayudará. – Jawad

uso position:fixed en lugar de position:absolute

El primero es relativo a la ventana de la pantalla. (no se ve afectado por el desplazamiento)

El segundo es relativo a la página. (afectado por el desplazamiento)

Nota: IE6 no admite la posición: fija.

Fuente

2011-06-06 18:00:03 Kraz

@Kraz: la siguiente pregunta es cómo hacer eso en el centro de div específico, de acuerdo con la vista actual: http://stackoverflow.com/questions/17762818/how-to-center-image-in-the-specific -div-according-to-current-viewport-position – noisy

afaik, actualmente no se puede hacer solo en CSS. Requeriría 'position: absolute' (' fixed' no funcionará) y otros valores (superior, derecho ...) determinados con javascript. – Kraz

cambio de la posición absoluta del div ocupado para fijo

Fuente

2011-06-06 17:59:08

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

Fuente

2015-03-25 18:42:26

Esto es lo que he hecho por 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>

Fuente

2017-06-24 18:36:32 Salim

trabajado para mí en angular 4

añadiendo style="margin:0 auto;"

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

Fuente

2017-12-20 06:13:06

CSS: Indicador de carga de posición en el centro de la pantalla

Respuesta

Cuestiones relacionadas