CSS: расположите индикатор загрузки в центре экрана.

Как я могу расположить индикатор загрузки в центре экрана. В настоящее время я использую небольшой заполнитель, и, похоже, он работает нормально. Однако, когда я прокручиваю вниз, индикатор загрузки остается прямо в этом предопределенном положении. Как я могу заставить его следовать за прокруткой, чтобы он всегда находился сверху??

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

css center position
person Frank Vilea    schedule 06.06.2011    source источник
comment
Я не уверен в вашей проблеме. Возможно положение: фиксированное. HTML поможет.   -  person Jawad    schedule 06.06.2011

Ответы (8)


arrow_upward
59
arrow_downward

используйте position:fixed вместо position:absolute

Первый относится к окну вашего экрана. (не влияет на прокрутку)

Второй относится к странице. (зависит от прокрутки)

Примечание. IE6 не поддерживает position:fixed.

person Kraz    schedule 06.06.2011
comment
@Kraz: следующий вопрос: как это сделать в центре конкретного div в соответствии с текущим окном просмотра: stackoverflow.com/questions/17762818/ - person noisy; 20.07.2013
comment
afaik, в настоящее время это невозможно сделать только в CSS. Потребуется position:absolute (fixed не будет работать) и другие значения (вверху, справа...), определенные с помощью javascript. - person Kraz; 22.07.2013

arrow_upward
19
arrow_downward

Вот что я сделал для 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>
person Salim    schedule 24.06.2017

arrow_upward
2
arrow_downward

изменить абсолютную позицию занятого div на фиксированную

person Anish Joseph    schedule 06.06.2011

arrow_upward
2
arrow_downward

Вы можете использовать это OnLoad или во время извлечения информации из БД.

В HTML добавьте следующий код:

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

In CSS add following Code:

#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
person Praveen Gopal    schedule 22.10.2018

arrow_upward
2
arrow_downward

Вот решение, использующее оверлей, который блокирует вместе со счетчиком дизайна материалов, который вы настраиваете один раз в своем приложении, и вы можете вызывать его из любого места.

app.component.html

(поместите это где-нибудь на корневой уровень вашего html)

<div class="overlay" [style.height.px]="height" [style.width.px]="width" *ngIf="message.plzWait$ | async">
        <mat-spinner class="plzWait"  mode="indeterminate"></mat-spinner>
</div>

app.component.css

.plzWait{
  position: relative;
  left: calc(50% - 50px);
  top:50%;

}
.overlay{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .5;
  z-index: 999999;
}

app.component.ts

height = 0;
width = 0;
constructor(
    private message: MessagingService
  }
ngOnInit() {
    this.height = document.body.clientHeight;
    this.width = document.body.clientWidth;
  }

сообщения.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root',
  })
export class MessagingService {
    // Observable string sources
  private plzWaitObservable = new Subject<boolean>();


  // Public Observables you subscribe to
  public plzWait$ = this.plzWaitObservable.asObservable();

  public plzWait = (wait: boolean) => this.plzWaitObservable.next(wait);
}

Какой-то другой компонент

constructor(private message: MessagingService) { }
somefunction() {
    this.message.plzWait(true);
    setTimeout(() => {
            this.message.plzWait(false);
    }, 5000);
}
person Post Impatica    schedule 18.09.2019
comment
Следуя вашему ответу, я, наконец, смог поместить свой загрузчик в центр, независимо от размера экрана. Большое спасибо! - person O.MeeKoh; 02.02.2020

arrow_upward
1
arrow_downward

Работал для меня в angular 4

добавив style="margin:0 auto;"

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

arrow_upward
0
arrow_downward 

transform: translate(50%, 50%);

Вы можете попробовать это, в моем случае это сработает

<div class="position-relative">
<div class="position-absolute" style="transform: translate(50%, 50%)"> loader or anything Else</div>
</div>
person Mubeen Naeem    schedule 04.06.2021

arrow_upward

arrow_downward

person    schedule
comment
Как я могу добавить текст тоже в центр - person Developer; 23.08.2020