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

User · Answer

Worked for me in angular 4   by adding style  margin 0 auto     lt mat-progress-spinner   style  margin 0 auto      ngIf  isLoading    mode  indeterminate  gt     lt  mat-progress-spinner gt

User · Answer

x000D   x000D   loader  x000D    position  fixed  x000D    left  0px  x000D    top  0px  x000D    width  100   x000D    height  100   x000D    z-index  9999  x000D    background  url    upload wikimedia org wikipedia commons thumb e e5 Phi fenomeni gif 50px-Phi fenomeni gif    x000D                50  50  no-repeat rgb 249 249 249   x000D    x000D   lt div class  loader  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div class  overlay   style height px   height   style width px   width   ngIf  message plzWait    async  gt           lt mat-spinner class  plzWait   mode  indeterminate  gt  lt  mat-spinner gt   lt  div gt    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 lt boolean gt            Public Observables you subscribe to   public plzWait    this plzWaitObservable asObservable       public plzWait    wait  boolean    gt  this plzWaitObservable next wait       Some other component  constructor private message  MessagingService      somefunction         this message plzWait true       setTimeout      gt                this message plzWait false          5000

User · Answer

This is what I ve done for Angular 4    lt style type  text css  gt       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       lt  style gt    lt  head gt    lt body gt     lt app-root gt           lt div class  centered  gt             lt h1 gt Loading    lt  h1 gt           lt  div gt     lt  app-root gt   lt  body gt

User · Answer

change the position absolute of div busy to fixed

User · Answer

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

User · Answer

You can use this OnLoad or during fetch infos from DB  In HTML Add following code    lt div id  divLoading  gt   lt p id  loading  gt       lt img src    images spinner gif  gt   lt  p gt      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

[css] CSS: Position loading indicator in the center of the screen

Examples related to css

Examples related to position

Examples related to center