CSS：将加载指示器定位在屏幕中央

Question

CSS：将加载指示器定位在屏幕中央

64

我该如何将我的加载指示器定位在屏幕中央？目前我使用了一个小占位符，它似乎很好用。但是，当我向下滚动时，加载指示器仍然停留在预定义的位置。我该如何使其跟随滚动，以便它始终停留在页面顶部？

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

- Frank Vilea

4

我不确定你的问题是什么，可能涉及到“position: fixed”的内容。需要查看HTML代码来帮助解决。 - Jawad

9个回答

58

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

- Ananta Prasad

我该如何将文本居中添加？ - Developer

你为什么添加了 rgb(249,249,249)？这会使得旋转区域不透明（白色），而不是透明的。你需要将其移除；大多数旋转器都是透明的，或者至少是半透明的（例如，不透明度为0.3或0.4），但不是不透明的。 - gene b.

你可以这样做 - Ananta Prasad

26

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

- Salim

6

以下是使用覆盖层和 Material Design spinner 的解决方案，您可以在应用程序中仅配置一次，然后从任何位置调用。

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

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

- Post Impatica

根据您的回答，我终于能够让我的加载器在任何屏幕大小下都居中了。非常感谢！ - O.MeeKoh

2

将div busy的position属性从absolute改为fixed。

- Anish Joseph

2

你可以在页面加载时或从数据库获取信息时使用此代码。

在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

- Praveen Gopal

1

在Angular 4中，对我起作用的方法是添加style="margin:0 auto;"

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

- naila naseem

0

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

- mihir r

0

transform: translate(50%, 50%);

你可以尝试这个，在我的情况下它会起作用

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

- Mubeen Naeem

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kraz · Accepted Answer

使用position:fixed代替position:absolute

第一个相对于屏幕窗口而言。(不受滚动影响)

第二个相对于页面而言。(受滚动影响)

注意：IE6不支持position:fixed。