CSS：将加载指示器定位在屏幕中央
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6256043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Position loading indicator in the center of the screen
提问by Frank Vilea
How can I position my loading indicator in the center of the screen. Currently I'm using a little placeholder and it seems to work fine. However, when I scroll down, the loading indicator stays right in that predefined position. How can I make it follow the scrolling so that it always sits on top??
如何将我的加载指示器放置在屏幕中央。目前我正在使用一个小占位符，它似乎工作正常。但是，当我向下滚动时，加载指示器会停留在该预定义位置。我怎样才能让它跟随滚动，以便它始终位于顶部？
#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%;
}
回答by Kraz
use position:fixedinstead of position:absolute
使用position:fixed代替position:absolute
The first one is relative to your screen window. (not affected by scrolling)
第一个是相对于您的屏幕窗口。（不受滚动影响）
The second one is relative to the page. (affected by scrolling)
第二个是相对于页面的。（受滚动影响）
Note: IE6 doesn't support position:fixed.
注意：IE6 不支持 position:fixed。
回答by Ananta Prasad
.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>回答by Salim
This is what I've done for Angular 4:
这就是我为 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>
回答by Anish Joseph
change the position absolute of div busy to fixed
将 div busy 的绝对位置更改为固定
回答by naila naseem
Worked for me in angular 4
在角度 4 为我工作
by adding style="margin:0 auto;"
通过添加 style="margin:0 auto;"
<mat-progress-spinner
style="margin:0 auto;"
*ngIf="isLoading"
mode="indeterminate">
</mat-progress-spinner>
回答by Praveen Gopal
You can use this OnLoad or during fetch infos from DB
您可以使用此 OnLoad 或在从数据库获取信息期间
In HTML Add following code:
在 HTML 中添加以下代码：
<div id="divLoading">
<p id="loading">
<img src="~/images/spinner.gif">
</p>
In CSS add following Code:
在 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%;}
if you want to show and hide from JS:
如果你想显示和隐藏 JS：
document.getElementById('divLoading').style.display = 'none'; //Not Visible
document.getElementById('divLoading').style.display = 'block';//Visible
回答by Helzgate
Here is a solution using an overlay that inhibits along with material design spinner that you configure one time in your app and you can call it from anywhere.
这是一个使用叠加层的解决方案，该解决方案与您在应用程序中配置一次的材料设计微调器一起禁止，您可以从任何地方调用它。
app.component.html
应用程序组件.html
(put this somewhere at the root level of your 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
应用组件.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
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
消息服务.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);
}
Some other component
一些其他组件
constructor(private message: MessagingService) { }
somefunction() {
this.message.plzWait(true);
setTimeout(() => {
this.message.plzWait(false);
}, 5000);
}
