CSS: Position loading indicator in the center of the screen
CssPositionCenterCss Problem Overview
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%;
}
Css Solutions
Solution 1 - Css
use position:fixed instead of 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.
Solution 2 - Css
.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>
Solution 3 - Css
This is what I've done for 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>
Solution 4 - Css
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
(put this somewhere at the root level of your 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);
}
Some other component
constructor(private message: MessagingService) { }
somefunction() {
this.message.plzWait(true);
setTimeout(() => {
this.message.plzWait(false);
}, 5000);
}
Solution 5 - Css
change the position absolute of div busy to fixed
Solution 6 - Css
You can use this OnLoad or during fetch infos from DB
In HTML Add following code:
<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%;}
if you want to show and hide from JS:
document.getElementById('divLoading').style.display = 'none'; //Not Visible
document.getElementById('divLoading').style.display = 'block';//Visible
Solution 7 - Css
Worked for me in angular 4
by adding style="margin:0 auto;"
<mat-progress-spinner
style="margin:0 auto;"
*ngIf="isLoading"
mode="indeterminate">
</mat-progress-spinner>
Solution 8 - Css
transform: translate(50%, 50%);
You may try this is in my case it will work
<div class="position-relative">
<div class="position-absolute" style="transform: translate(50%, 50%)"> loader or anything Else</div>
</div>