CSS:位置加载指示器位于屏幕中央

Question

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kra*_*raz 44

用position:fixed而不是position:absolute

第一个是相对于您的屏幕窗口.(不受滚动影响)

第二个是相对于页面.(受滚动影响)

注意:IE6不支持position:fixed.

@Kraz：下一个问题是，如何根据当前视口在特定div的中心进行操作：http：//stackoverflow.com/questions/17762818/how-to-center-image-in-the-specific- div根据当前视口位置 (2认同)

Answer 2

Ana*_*sad 22

.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);
}

Run Code Online (Sandbox Code Playgroud)

<div class="loader"></div>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Sal*_*lim 9

这是我为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>

Run Code Online (Sandbox Code Playgroud)

Answer 4

Hel*_*ate 7

这是一种使用覆盖层的解决方案，该覆盖层与材料设计旋转器一起抑制，您可以在应用程序中配置一次，然后可以从任何地方调用它。

应用程序组件.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>

Run Code Online (Sandbox Code Playgroud)

应用程序组件.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;
}

Run Code Online (Sandbox Code Playgroud)

应用程序组件.ts

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

Run Code Online (Sandbox Code Playgroud)

消息传递.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);
}

Run Code Online (Sandbox Code Playgroud)

其他一些组件

constructor(private message: MessagingService) { }
somefunction() {
    this.message.plzWait(true);
    setTimeout(() => {
            this.message.plzWait(false);
    }, 5000);
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	83832 次
最近记录：	6 年，1 月前