CSS: индикатор загрузки позиции в центре экрана - PullRequest
Новая
       32

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

26 голосов
/ 06 июня 2011

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

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

Ответы [ 6 ]

41 голосов
/ 06 июня 2011

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

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

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

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

19 голосов
/ 25 марта 2015 

.loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}
<div class="loader"></div>
5 голосов
/ 24 июня 2017

Вот что я сделал для 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 голосов
/ 06 июня 2011

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

1 голос
/ 20 декабря 2017

работал для меня в угловых 4

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

<mat-progress-spinner
  style="margin:0 auto;"
  *ngIf="isLoading"
  mode="indeterminate">
  </mat-progress-spinner>
0 голосов
/ 22 октября 2018

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

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

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

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

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