CSS: Position loading indicator in the center of the screen

Question

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

I am not sure as to your problem. Maybe position: fixed. The HTML will help. — Jawad, Jun 06 '11 at 17:55

score 72 · Accepted Answer · answered Jun 06 '11 at 18:00

72

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.

answered Jun 06 '11 at 18:00

Kraz

6,910
6
42
70

2

@Kraz: the next question is, how to do that in the center of specific div, according to current viewport: http://stackoverflow.com/questions/17762818/how-to-center-image-in-the-specific-div-according-to-current-viewport-position – noisy Jul 20 '13 at 13:39
afaik, it's currently not doable in CSS only. Would require `position:absolute` (`fixed` won't work) and others values (top,right...) determined with javascript. – Kraz Jul 22 '13 at 13:52

score 57 · Answer 2 · edited Mar 13 '19 at 18:47

57

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

edited Mar 13 '19 at 18:47

ashleedawg

20,365
9
72
105

answered Mar 25 '15 at 18:42

Ananta Prasad

3,655
3
23
35

How can I add the text too in center – Developer Aug 23 '20 at 09:51
Why did you add `rgb(249,249,249)`? That makes the spinner area opaque (white) rather than transparent. You need to remove that; most spinners are transparent, or semi-transparent at least (with an opacity of e.g. 0.3 or 0.4), but not opaque. – gene b. Dec 10 '22 at 01:52
you can also do that – Ananta Prasad Jan 12 '23 at 10:40

score 25 · Answer 3 · answered Jun 24 '17 at 18:36

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>

Post Impatica · Answer 4 · 2019-09-19T00:01:38.793

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

Following your answer, I was finally able to get my loader to center no matter what screen size it was. Thanks a lot! — O.MeeKoh, Feb 02 '20 at 17:14

score 2 · Answer 5 · answered Oct 22 '18 at 12:53

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

score 2 · Answer 6 · answered Jun 06 '11 at 17:59

2

change the position absolute of div busy to fixed

answered Jun 06 '11 at 17:59

Anish Joseph

1,026
3
10
24

score 1 · Answer 7 · answered Dec 20 '17 at 06:13

1

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>

answered Dec 20 '17 at 06:13

naila naseem

577
3
12
21

score 0 · Answer 8 · edited Jun 04 '21 at 13:08

0

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>

edited Jun 04 '21 at 13:08

Al Foиce ѫ

4,195
12
39
49

answered Jun 04 '21 at 11:49

Mubeen Naeem

55
1
2

score 0 · Answer 9 · answered Sep 07 '22 at 13:01

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