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 loadin

Answer 1

You can use this OnLoad or during fetch infos from DB

In HTML Add following code:

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